详解jquery uploadify 上传文件


Posted in Javascript onNovember 09, 2013

网上找了一天,大家都说Uploadify唯一的缺点就是不支持中文按钮,杯具之前,我看了下Uploadify的API,才发现了几个参数没被大家提及的,这正是解决此问题的关键。(以后坚决养成没事就看API的习惯)
    Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行。
    另一个参数,网上很少提到,是 buttonImg( 按钮图片),这时你完全可以用一个图片来替换掉插件自带的那个黑色的flash浏览按钮,只要你自己的图片上是中文,这不就解决了中文按钮问题么?如果只加这一个,你会发现你的按钮图片下面有一片白色区域,其实就是那个flash留下的,白色区域表示鼠标可用范围,这个范围可以用width,height来调整。还有一个参数wmode 它的默认值是opaque,把它改成transparent就行了,也就是把那片白色区域透明化。再用刚才说的方法,把按键点击范围设置成跟你图片一样大就完全OK了。

    Uploadify的用法就不说了,网上文章很多,跟别的jquery插件用法一样,就是几种文件的摆放路径而已。
    以下附上Uploadify部分参数的介绍,要看全部的就去看其API文件了,一般在下载的包里都有。

uploader:uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后弹出打开文件对话框,默认值:uploadify.swf。
script :后台处理程序的相对路径。默认值:uploadify.php
checkScript:用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName:设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method :提交方式Post 或Get 默认为Post
scriptAccess:flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain
folder :上传文件存放的目录。
queueID :文件队列的ID,该ID与存放文件队列的div的ID一致。
queueSizeLimit:当允许多文件生成时,设置选择文件的个数,默认值:999。
multi :设置为true时可以上传多个文件。
auto :设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传。
fileDesc:这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar docpdf文件”,打开文件选择框效果如下图:
fileExt :设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。
sizeLimit:上传文件的大小限制。
simUploadLimit:允许同时上传的个数默认值:1 。
buttonText:浏览按钮的文本,默认值:BROWSE 。
buttonImg:浏览按钮的图片的路径。
hideButton:设置为true则隐藏浏览按钮的图片。
rollover:值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。
width :设置浏览按钮的宽度,默认值:110。
height :设置浏览按钮的高度,默认值:30。
wmode :设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。默认值:opaque 。
cancelImg:选择文件到文件队列中后的每一个文件上的关闭按钮图标

Uploadify还自带了很多参数及有用的方法和回调函数,都在API里,虽然是全英文的,但很容易看懂,这里就不说了。
以下是我用到的代码,可以参考一下:

<script type="text/javascript">  
$(document).ready(function() {  
$("#uploadify").uploadify({  
'uploader'       :'images/uploadify.swf',  
'script'         :'<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do',  
'cancelImg'      : 'images/cancel.png',  
'folder'         : '/',  
'queueID'        : 'fileQueue',  
'fileDataName'   : 'uploadify',  
'fileDesc'       : '支持格式:xls.',   
'fileExt'        : '*.xls',  
'auto'           :false,  
'multi'          :true,  
'height'         : 20,  
'width'          : 50,  
'simUploadLimit' : 3,  
//'buttonText'     : 'fdsfdsf...',  
'buttonImg'      : 'images/browse.jpg',  
// 'hideButton'     : true,  
// 'rollover'       : true,  
'wmode'          : 'transparent',  
onComplete       : function (event, queueID,fileObj, response, data)  
{   
$('<li></li>').appendTo('.files').text(response);   
},   
onError          : function(event,queueID, fileObj)  
{   
alert("文件:"+ fileObj.name + " 上传失败");   
}   
// onCancel         : function(event,queueID, fileObj)  
// {   
//     alert("取消文件:" +fileObj.name);   
// }   
});
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader'       : 'images/uploadify.swf',
'script'         :'<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do',
'cancelImg'      : 'images/cancel.png',
'folder'         : '/',
'queueID'        : 'fileQueue',
'fileDataName'   : 'uploadify',
'fileDesc'       : '支持格式:xls.',
'fileExt'        : '*.xls',
'auto'           : false,
'multi'          : true,
'height'         : 20,
'width'          : 50,
'simUploadLimit' : 3,
//'buttonText'     : 'fdsfdsf...',
'buttonImg'      : 'images/browse.jpg',
// 'hideButton'     : true,
// 'rollover'       : true,
'wmode'          : 'transparent' ,
onComplete       : function (event, queueID,fileObj, response, data)
{
$('<li></li>').appendTo('.files').text(response);
},  www.th7.cn
onError          : function(event,queueID, fileObj)
{
alert("文件:"+ fileObj.name + " 上传失败");
}
// onCancel         : function(event,queueID, fileObj)
// {
//     alert("取消文件:" + fileObj.name);
// }
});

要注意的是,我的script属性值是一个请求路径,我发现在我设置了同时上传多个文件后(比如3),并不是每请求一次去上传3个文件,而仍然是执行3次请求,请求一次上传一个文件。这也没办法,uplodify有那么多回调函数,要是一次处理多个,那回调函数的参数就不知道拿哪个了,因为这些参数都不是数组。
也就是说,无论你设置同时上传几个文件,它都会一个一个去请求并上传,只是表面上感觉好像有多个线程同时在处理上传请求一样,只是表象而已。而且如果你把simUploadLimit设置过大就会经常出错,我设置成5的时候经常会有一两个文件上传失败。
Javascript 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
深入理解Javascript中的循环优化
Nov 09 #Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 #Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 #Javascript
window.onresize 多次触发的解决方法
Nov 08 #Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 #Javascript
setTimeout和setInterval的深入理解
Nov 08 #Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 #Javascript
You might like
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
简单的编程0基础下Python入门指引
2015/04/01 Python
python实现类的静态变量用法实例
2015/05/08 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
迟到检讨书800字
2014/01/13 职场文书
党员公开承诺书
2014/03/25 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
教师先进个人材料
2014/12/17 职场文书
史上最牛辞职信
2015/05/13 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
python随机打印成绩排名表
2021/06/23 Python
SQL Server中锁的用法
2022/05/20 SQL Server