uploadifive 1.1.2 动态传参

   之前用过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', //限制允许上传的图片后缀