在这说一个多文件上传 是可以批量选择的一个很强大的空间 不过原理上还是一个一个文件上传 但是可以看到批量的效果
js代码
$(function(){
$("#fileId").uploadify({
'uploader' : '${ctx}/js/uploadify-v2.1.4/uploadify.swf',
'script' : '${ctx}/case/fileUpload.action',
'cancelImg' : '${ctx}/js/uploadify-v2.1.4/cancel.png',
'fileDataName' : 'file', //对应存放的input中的name
'queueID' : 'uploadifyDiv',
'auto' : false,
'multi' : true,
'displayData' : 'percentage',
'buttonText' : escape('浏览文件'),
'simUploadLimit' : 1, //同时上传多少个
'sizeLimit' : 1024*1024*100, //单个文件最大100M
'queueSizeLimit' : 500, //最大文件数限制
'fileDesc' : '',
'fileExt' : '',
'expressInstall': '${ctx}/js/uploadify-v2.1.4/expressInstall.swf',
'onAllComplete' : function(event,data) {
$("#fileUploadMsg").text('总共 ' + data.filesUploaded + ' 个文件上传成功!');
//window.location.href="${ctx}/case/switchProof.action"
},
'onQueueFull' : function (event,queueSizeLimit) {
alert( "已经超出最大文件数"+queueSizeLimit +"个了!");
return false;
},
'onError': function (event, ID, fileObj, errorObj) {
//超过大小限制
if(errorObj.type == "File Size"){
alert(fileObj.name + ' 文件大小超过100M!');
$('#fileId').uploadifyCancel(ID);
}
//上传出错
else if(errorObj.type == "HTTP" || errorObj.type == "IO"){
alert(fileObj.name + ' 文件上传失败!');
//恢复按钮
$(window.parent.document.body).find(":button").removeAttr("disabled");
}
},
'onOpen': function(event,ID,fileObj) {
$('#fileUploadMsg').text('文件上传中请勿关闭页面!');
}
});
});
按钮
<td class="dvRtd" colspan="3">
<div id="fileUploadDiv" >
<fieldset id="uploadFile">
<legend style="font-size: 14px; color: blue">上传文件 <input type="button" οnclick="goSubmit();" value="下一步"/></legend>
<input type="file" name="file" id="fileId" />
<span id="fileUploadMsg" style="color: blue;"></span>
<div id="uploadifyDiv" style="overflow:auto; height:auto; border:1px solid #cccccc"></div>
</fieldset>
</div>
</td>
用这个控件的时候感觉有很多局限性 每上次一个文件就会运行一次后台代码 而我每次要获得文件的id并拼起来 这里我选择用一个静态的属性 然后在每次进到页面的action里把静态属性初始化。
还有一点 ,就是如果在提交的时候上传,就有一个问题,就是获取不到页面的input的name值。这个我没解决是指空间下加个按钮 点击下一步 才上传