之前用过Flash版本的uploadify,写过一篇关于uploadify动态传参的文章(点击打开链接)。后来有了HTML5版本的上传控件,叫uploadifive,测试着用了一下,效果还不错。这里主要说一下动态传参的问题。
1.控件初始化:
在页面载入完成的时候,初始化控件如下,跟uploadify类似:
$("#file_upload").uploadifive({
'fileObjName': 'fileData',
'auto': false,
'buttonText': "选择文件",
'buttonClass': 'btn btn-primary',
'height': '30',
'width': '200',
'removeCompleted': true,
'uploadScript': '/FileUpload/Upload', //这里是通过MVC里的FileUpload控制器里的Upload 方法
'queueID': 'uploadfileQueue',
'multi': true
//,'formData': { 'ID': 11 }----由于这里初始化时传递的参数,当然就这里就只能传静态参数了
});
2.动态传参数:
动态传参还是通过 formData参数来完成,就是在上传之前动态能formData参数赋值。由于uploadifive并没有提供setting方法,所以这里能只能通过这种方式完成:
var myid=1234;
$('#file_upload').data('uploadifive').settings.formData = { 'ID': myid}; //动态更改formData的值
$('#file_upload').uploadifive('upload'); //上传
3.后台函数及取值
后台是通过asp.net mvc方式完成的,将上传函数放在了控制器里面。
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(HttpPostedFileBase fileData, long ID)//fileData即是文件的信息,ID即为动态传递的参数,可以直接取值
{
return Json(new
{
FileName = fileData.FileName,
MyID = ID
});
}
当然也可以传递多个参数。
官方文档上并没有直接通过设置setting的值,网上了找了半天,
参考了这篇文章中的知识点http://stackoverflow.com/questions/14057038/uploadifive-formdata-passing-through-multi-select-array/14084481。
<link type="text/css" href="../JS/uploadifive/uploadifive.css" rel="stylesheet" />
<script type="text/javascript" src="../Easyui/jquery.min.js"></script>
<script type="text/javascript" src="../JS/uploadifive/jquery.uploadifive.js"></script>
$('#file_upload').uploadifive({
'auto': false, //是否自动上传,默认true
'multi': false,
'dnd': true, //拖放
'uploadScript': '../Pub/RambleHandler.ashx', // 服务器处理地址
'cancelImg': '../JS/uploadifive/uploadifive-cancel.png',
//'itemTemplate': '<div class="uploadifive-queue-item">
// <a class="close" href="#">X</a>
// <div><span class="filename"></span><span class="fileinfo"></span></div>
// <div class="progress">
// <div class="progress-bar"></div>
// </div>
// </div>',
//'checkExisting': 'url',
'buttonText': "请选择文件", //按钮文字
'height': 30, //按钮高度
'width': 120, //按钮宽度
'fileSizeLimit': "2GB", //上传文件的大小限制 0则表示无限制
'uploadLimit': 1, //上传文件数
'queueSizeLimit': 1, //一次可以在队列中拥有的最大文件数
'fileType': 'image/jpeg', //文件类型(mime类型),要允许所有文件,请将此值设置为false,多个类型使用数组形式['image/jpeg','video/mp4']
//'formData': { "imgType": "normal" }, //提交给服务器端的参数
'overrideEvents': ['onDialogClose', 'onError'], //onDialogClose 取消自带的错误提示
'onFallback': function () { //如果浏览器没有兼容的HTML5文件API功能,则在初始化期间触发
alert('浏览器不支持HTML5,无法上传!');
},
'onSelect': function (queue) { //选择的每个文件触发一次,无论它是否返回和错误。cancelled:文件数量取消(未替换) count:队列中的文件总数 errors:返回错误的文件数 queued:添加到队列的文件数 replaced:文件替换的数量 selected:所选文件的数量
//return false;
},
'onDrop': function (file, fileDropCount) {
},
'onAddQueueItem': function (file) {
},
'onClearQueue': function (queue) {
},
'onCancel': function (file) {
},
'onError': function (errorType, file) {
if (file != 0) {
var settings = $('#file_upload').data('uploadifive').settings;
switch (errorType) {
case 'UPLOAD_LIMIT_EXCEEDED':
layer_Msg("上传的文件数量已经超出系统限制的" + settings.queueSizeLimit + "个文件!");
break;
case 'FILE_SIZE_LIMIT_EXCEEDED':
layer_Msg("文件 [" + file.name + "] 大小超出系统限制的" + $('#file_upload').uploadifive('settings', 'fileSizeLimit') + "大小!");
break;
case 'QUEUE_LIMIT_EXCEEDED':
layer_Msg("任务数量超出队列限制");
break;
case 'FORBIDDEN_FILE_TYPE':
layer_Msg("文件 [" + file.name + "] 类型不正确!");
break;
case '404_FILE_NOT_FOUND':
layer_Msg("文件未上传成功或服务器存放文件的文件夹不存在");
break;
}
}
},
//'onProgress': function (file, e) { //每次文件上传都有进度更新时触发 e:事件(lengthComputable:布尔值,指示文件的长度是否可计算 loaded:加载的btyes数 total:要加载的总字节数 )
//},
'onUpload': function (filesToUpload) { //在使用upload方法调用的上载操作期间触发一次 filesToUpload:需要上传的文件数
if (filesToUpload < 1) {
layer_Msg("未选择任何文件");
return false;
}
},
'onUploadFile': function (file) { //每次启动的文件上载都会触发一次。file:正在上载的文件对象
$('#file_upload').data('uploadifive').settings.formData = { id: id, point: point, type: type, oldFile: name }; //动态更改formData的值
},
'onUploadComplete': function (file, data) { //对于完成的每个文件上载,触发一次。
if (data) {
try {
data = JSON.parse(data);
if (data.result === true) {
name = data.msg;
layer_Msg("上传成功");
} else {
layer_Msg(data.msg);
}
} catch (e) {
alert(data);
}
}
},
'onQueueComplete': function (uploads) { //队列中的所有文件完成上传后触发。attempts:在上次上载操作中尝试的文件上载次数 successful:上次上载操作中成功上载文件的数量 errors:在上次上载操作中返回错误的文件上载数 count:从此UploadiFive实例上载的文件总数
}
});
<input type="file" name="file_upload" id="file_upload" />
Uploadifive:
'fileType':[
"application/pdf",
"application/msword",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.ms-excel",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"application/vnd.ms-powerpoint",
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
"application/zip",
"application/x-rar-compressed",
],//限制允许上传的后缀
Uploadifive 格式过滤和Uploadify不太一样;
Uploadify:
'fileTypeExts': '*.doc; *.docx; *.xlsx; *.xls; *.ppt; *.pptx; *.pdf; *.zip; *.rar', //限制允许上传的图片后缀