关于jquery文件上传插件 uploadify 3.1的使用
要使用uplaodify3.1，自然要下载相应的包，下载地址http://www.uploadify.com/download/，这里有两种包，一个是基于flash，免费的，一个是基于html5,需要付费，我这里所说的也是前一种。当然现在可能已经不再是3.1版本了，估计是3.2了。不过，差别不会太大！
首先在页面中引入一下文件:
<link rel="stylesheet" type="text/css" href="css/uploadify.css"> <script type="text/javascript" src="js/jquery-1.4.4.js"></script> <script type="text/javascript" src="js/jquery.uploadify-3.1.js"></script> <script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script>
uploadify.swf要和css放在一起，不然会找不到。
jsp页面里：
<input type="file" name="uploadify" id="uploadify" value="浏览"/> <div id="fileQueue" style="border-top: thin solid gray;"></div>
一下是我自己的页面的代码：
<script type="text/javascript"> $('#rightFrame').load(function(){ var account = $("#account").val(); var id= $("#userId").val(); var currentNode=0; $("#uploadify").uploadify({ //注:这里uploadify为html标签，文件输入框id swf: 'css/uploadify.swf', uploader: 'uploadfile.action;', cancelImg: '/images/uploadify-cancel.png', buttonText:'选择文件', fileObjName :'uploadify', auto: true, multi:true, Debug:true, queueID:'fileQueue',//这里fileQueue 为上传进度条显示在哪个div里 formData:{'account':account,'id':id,'currentNode':$("#rightFrame").contents().find("#test").val()}, removeCompleted:true, queueSizeLimit:999, fileSizeLimit:'100MB', height:28, width:90, successTimeout:28, requeueErrors:true, uploadLimit:5, onUploadSuccess: function (file, data, response) { if(response) { currentNode=data; } }, onQueueComplete : function(stats){ window.parent.rightFrame.location.href="fileaction?filenode="+currentNode; alert("上传完毕"); } }); }); </script>
属性解释：
|
auto |
Boolean |
True |
添加到队列后是否自动上传 |
|
buttonClass |
String |
Empty String |
为Uploadify按钮添加一个类名 |
|
buttonCursor |
String |
“hand” |
鼠标移上浏览按钮显示的鼠标样式 两个值：arrow(箭头)、hand(手形) |
|
buttonImage |
String |
Null |
“浏览”按钮的背景图像的路径。 如果使用默认的样式，你可以设置按钮悬停状态(这个选项是一个方便的选项和按钮分配图像的最佳方式是在CSS文件中。) |
|
buttonText |
String |
“SELECT FILES” |
显示在浏览按钮上的文本。注：若没有修改uploadify.swf的字体和uploadify.js文件的编码方式，使用中文将会是乱码 |
|
checkExisting |
String |
|
|
|
Debug |
Boolean |
False |
设置为True打开SWFUpload调试模式。 |
|
fileObjName |
String |
“Filedata” |
在服务器端接收文件的Form表单键名 |
|
fileSizeLimit |
Number |
0 |
允许上传文件的最大大小。这个值可以是一个数字或字符串。如果它是一个字符串，它接受一个单位(B, KB, MB, or GB)。默认单位为KB。您可以将此值设置为0 ，没有限制。 |
|
fileTypeDesc |
String |
“All Files” |
可选的文件的说明。此字符串将出现在浏览文件对话框的文件类型下拉框中。 |
|
fileTypeExts |
String |
“*.*” |
允许上传的文件扩展名。可以以英文分号隔开的多种文件扩展名。即”*.jpg;*.gif;” 注：如果用户手动键入文件名，将会绕过此安全级别，所以你需要在后台再次对文件名类型进行验证。 |
|
formData |
JSON Object |
Empty Object |
一个额外的JSON对象数据，将与每个文件一起发送至服务器端。如果为动态值，请在onUploadStart()中使用settings()方法更改该JSON值 |
|
Height |
Number |
30 |
浏览按钮所显示的高度 |
|
method |
String |
“post” |
上传文件的方式。 两个值：”get”、”post” |
|
multi |
Boolean |
True |
设置是否为多文件上传，如果设置为False，一次将只能上传一个文件 |
|
overrideEvents |
JSON Array |
Empty Array |
你想绕过的默认脚本的事件名称的数组。你可以告诉在文档页中的每个事件可以被重写的事件。 |
|
preventCaching |
Boolean |
True |
一个防止Flash缓存和冲突的方式，如果设置为True，则Flash的URL将会添加一个随机数。 |
|
progressData |
String |
“percentage” |
设置要在文件上传进度更新队列项目中显示数据的类型。 两个值”percentage”(显示百分比)、” speed”(显示速度) |
|
queueID |
String |
False |
上传文件队列所放的元素ID，必须为ID，且不像jQuery选择器那样，它不需要加#号。如果为false，则队列会自动添加到浏览按钮下方。 |
|
queueSizeLimit |
Number |
999 |
一次可以在队列中文件的最大数目。这并不限制可以上载的文件的数目。若要限制可以上载的文件的数目，请使用 uploadLimit。如果选定要添加到队列的文件的数目超过此限制，则会触发 onSelectError 事件。 |
|
removeCompleted |
Boolean |
True |
当文件上传完成后，是否将此文件从上传队列中清除(默认清除)。 |
|
removeTimeout |
Number |
3 |
从文件上传完成到清除此文件之间的延迟。单位：秒 |
|
requeueErrors |
Boolean |
False |
如果设置为true，期间上传回传失误，重新排队，并多次试图上传的文件。 |
|
successTimeout |
Number |
30 |
上传成功后，将等待服务器的响应时间。在此时间后，若服务器未响应，则默认为成功(因为已经上传完成，只是等待服务器的响应)。单位：秒 |
|
swf |
String |
“uploadify.swf” |
uploadify中的uploadify.swf的路径，可以是相对或绝对路径。相对路径为相对于当前页面路径。 |
|
uploader |
String |
“uploadify.php” |
服务器上传脚本，即接收上传文件后台处理文件路径，可以是相对或绝对路径。相对路径为相对于当前页面路径。 |
|
uploadLimit |
Number |
999 |
允许您上传的文件的最大数量。当达到或超过这个数字， onUploadError事件被触发。 |
|
width |
Number |
120 |
浏览按钮的宽度。 |
需要注意的是：fileObjName属性 它必须和你服务器里文件接收名一致，不然接收不到路径！
