asp.net中Fine Uploader文件上传组件使用介绍(2)

查看JS构建qq.Fineuploader对象创建过程.首先指定Fine Uploader插件的Dom元素.通过Dom获取操作.request则是对应服务器端实现文件路径.在这建议不要自己构建服务器端处理.而是直接采用官方提供的实现文件修改即可.template则是对应上传文件添加内容模版也可以自己修改.debug是一个布尔值.用来控制是否使用浏览器的控制台打印Fine Uploader的调试信息,默认为false.
qq.FineUploader对象还有如下控制参数:
validation:该参数一般用来在执行上传文件操作前.在客户端做一些验证.验证操作包含文件格式.文件大小.等添加格式如下:

复制代码 代码如下:


validation:
       {
             allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            sizeLimit: 204800 // 200 kB = 200 * 1024 bytes
      }


allowedExtensions控制上传文件的后缀格式数组.
sizeLimit上传文件大小的上限,单位为byte的数值.浏览器不一定支持本设置.也可以在服务器端里设置.
minSizeLimit:上传文件大小的下限,单位为byte的数值.同上有些浏览器存在适配问题.建议统一在服务端设置.
另外针对qq.FineUploder对象在执行上传操作整个过程.定义了五个客户端可控做额外操作的事件.可以再callback参数下设置定义:

复制代码 代码如下:


  callbacks:
  {
          onSubmit: function(id, fileName) {
            $messages.append('<div></div>');
          },
          onUpload: function(id, fileName) {
            $('#file-' + id).addClass('alert-info')
                            .html('<img src="https://www.jb51.net/client/loading.gif" alt="Initializing. Please hold."> ' +
                            'Initializing ' +
                            '“' + fileName + '”');
          }
  }


onSubmit事件:文件开始提交.调用参数格式如下:onSubmit:  function(id,  fileName)  {}.
onUpload事件: 文件开始上传.调用参数格式如下:onUpload: function(id, fileName) {}.
onProgress事件: 文件正在上传.调用参数格式如下:onProgress:  function(id,  fileName,  loaded,  total)  {}.
onComplete事件: 文件上传成功. 调用参数格式如下:onComplete:  function(id,  fileName,  responseJSON)  {}.
onCancel事件: 取消文件上传.调用参数格式如下:onCancel:  function(id,  fileName)  {}.
如上五个事件基本覆盖整个上传文件操作中所有过程.完全以开放的形式可以再客户端操作.关于调用如上事件参数说明如下:
Id:表示第几个开始上传的文件.Fine Uploder定义是默认从0开始计数.
fileName:上传文件的文件名.
loaded:表示已经上传到服务器端数据的大小[byte].
total: 需要上传文件的大小.
responseJSON: 用来在上传操作完成后返回的Json格式的数据.通过Jquery反序列化出来对象.其中包含一个IsSuccess属性用来判断此次上传是否成功.
如果你想在上传过程向服务器端传递数据.可以通过如下参数控制:
params:用来向服务器端传递数据.注意params采用key-value的数组存储.采用Post方式发送给服务器端.一般传递参数格式如下:

复制代码 代码如下:


    params:
    {               
        argument1: "value1",               
        argument2: "value2"               
    },


ok.这时基本关于Fine Uploader客户端初始化和控制操作选项基本完成.当我们需要上传操作时.如果IsAuto=false时可以通过已经定义qq.FineUploader对象的uploadStoreFiles()方式手工触发上传操作:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjdjgg.html