zoukankan      html  css  js  c++  java
  • 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', //限制允许上传的图片后缀

  • 相关阅读:
    交互式shell和非交互式shell、登录shell和非登录shell的区别
    cocos2d-x入门笔记(1)
    《你的知识需要管理》读后感悟以及笔记
    Qt入门之信号与槽机制
    《程序员的思维修炼》读书笔记以及感悟
    Py邮件
    2018-2019 20165226 Exp9 Web安全基础
    2018-2019 20165226 Exp 8 Web基础
    2018-2019 20165226 Exp7 网络欺诈防范
    2018-2019 20165226 Exp6 信息搜集与漏洞扫描
  • 原文地址:https://www.cnblogs.com/Alex80/p/11413574.html
Copyright © 2011-2022 走看看