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

uploadifive 1.1.2 动态传参的更多相关文章

  1. js函数动态传参

    js函数体内可以通过arguments对象来接收传递进来的参数,利用这一对象属性可以动态传参. function box() { return arguments[0]+' | '+arguments ...

  2. uploadify的用法与动态传参 提供demo下载

    ---恢复内容开始--- 官网:http://www.uploadify.com/   一款不错的上传插件.官方文档http://www.uploadify.com/documentation/ 用法 ...

  3. Postman 串行传参和动态传参详解

    Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件 用Postman做接口测试的时候,要把多条用例一起执行,就需要把用例连接起来,一次性执行 目录 串行传参 动态传参 使用 ...

  4. python之路--动态传参,作用域,函数嵌套

    一 . 动态传参(重点)  * ,  ** * 与 ** * 在形参位置. * 表示不定参数, 接收的是位置参数 接收到的位置参数的动态传参: 都是元组 def eat(*food): # 在形参这里 ...

  5. python----函数的动态传参

    函数的动态传参 *args 将所有的实参的位置参数聚合到一个元组,并将这个元组赋值给args 有些时候,对于函数,传入的实参数量可能是不固定的,也就是动态的,这个时候我们就需要用到函数的动态传参.下面 ...

  6. 在Java中动态传参调用Python脚本

    最近,又接触到一个奇葩的接口,基于老板不断催促赶时间的情况下,在重写java接口和复用已有的python脚本的两条路中选择了后者,但是其实后者并没有好很多,因为我是一个对python的认识仅限于其名称 ...

  7. python函数的动态传参.作用域与命名空间

    一.动态传参1.*表示动态传参. 可以接受所有的位置参数传参的时候自动的把实参打包成元组 交给形参 def chi(*food): print(food) chi() # 动态传参可以不传参数 chi ...

  8. python记录_day10 动态传参 命名空间 作用域

    一.动态传参 动态传参用到 *args 和 **kwargs ,*号表示接收位置参数,args是参数名:**表示接收关键字参数,kwargs是参数名 def chi(*food): print(foo ...

  9. [Android] 配置build.gradle 动态传参

    (1)一个Android工程中有一个build.gradle是负责Project范围的,而Module中又有各自的build.gradle是专门负责模块的. (2)在Gradle中Task是一等公民, ...

随机推荐

  1. GROUP BY HAVING,ORDER BY

    --HAVING语句与GROUP BY语句联合使用,用来过滤由GROUP BY语句返回的记录集. --并且HAVING语句的存在弥补了WHERE关键字不能与聚合函数联合使用的不足. ), SUM([C ...

  2. Nginx 脚本自动进行日志切割

    随着网站的运行时间越来越长,日志文件也会随之越来越大需要对Nginx日志进行切割,下面是每周六晚上自动进行日志切割的shell脚本 脚本如下: [root@jrjs ~]# vim /usr/loca ...

  3. MySQL/MariaDB数据库的事务和隔离级别

      MySQL/MariaDB数据库的事务和隔离级别 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.事务概述 1>.事务Transactions 一组原子性的SQL语句 ...

  4. iptable千万不要yum remove iptables

    iptable千万不要运行yum remove iptables,进行卸载打开linux后发现没有firewalld和iptables,建议安装firewall 命令: yum install fir ...

  5. 压缩及解压命令gzip、bzip2、tar

    1. gzip 描述:压缩与解压缩 用法:gzip[选项]...[文件名称]... 选项:-d 解压 gzip hello.txt     # 文件压缩后名为hello.txt.gz gzip -d ...

  6. wait,waitpid

    要求 用man wait, man waitpid学习wait waitpid的使用 2 写出wait 的测试代码,要能说明你理解了wait 的返回值的每一位的含义 实验: ---------- ma ...

  7. es6 添加事件监听

    //定义被侦听的目标对象 }; //定义处理程序 var interceptor = { set: function (receiver, property, value) { console.log ...

  8. Spring boot jpa 设定MySQL数据库的自增ID主键值

    内容简介 本文主要介绍在使用jpa向数据库添加数据时,如果表中主键为自增ID,对应实体类的设定方法. 实现步骤 只需要在自增主键上添加@GeneratedValue注解就可以实现自增,如下图: 关键代 ...

  9. SpringCloud组件Eureka

    什么是微服务架构 架构设计概念,各服务间隔离(分布式也是隔离),自治(分布式依赖整体组合)其它特性(单一职责,边界,异步通信,独立部署)是分布式概念的跟严格执行SOA到微服务架构的演进过程作用:各服务 ...

  10. [RN] React Native 下实现底部标签(不支持滑动切换)

    底部标签是现在App的基本菜单实现 下面分别用 createBottomTabNavigator 和 createMaterialBottomTabNavigator 两种方法分别实现底部菜单 但此两 ...