发表于: 2017-05-08 23:42:35

1 928


今天完成的事:

研究一波FileUploader

属性

  • url {String}: 上传文件的服务器路径
  • alias {String}:  包含文件的名称,默认是file
  • queue {Array}: 上传队列
  • progress {Number}: 上传队列的进度,只读
  • headers {Object}: 上传的头文件信息, 浏览器需支持HTML5
  • formData {Array}: 与文件一起发送的表单数据
  • filters {Array}: 在文件加入上传队列之前应用过滤器.,如果过滤器返回true则文件加入队列中
  • autoUpload {Boolean}: 文件加入队列之后自动上传,默认是false
  • method {String}: 请求方式,默认是POST,浏览器需支持HTML5
  • removeAfterUpload {Boolean}: 文件上传成功之后从队列移除,默认是false
  • isHTML5 {Boolean}: 如果浏览器支持HTML5上传则返回true,只读
  • isUploading {Boolean}: 文件正在上传中返回true,只读
  • queueLimit {Number} : 最大上传文件数量(预定义)
  • withCredentials {Boolean} : 使用CORS,默认是false, 浏览器需支持HTML5

特性

  • 支持上传进度,在上传的时候,可以取消或者中止,支持文件拖拽(HTML5),目录拖拽(weikit),CORS, PUT(html5)/POST 方法

  • 支持使用 Flash polyfill FileAPI  跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。

  • 当文件的内容类型使用 $upload.http()时,支持直接上传到 CouchDB,imgur 等等。支持 Angular http POST/PUT请求的进度事件,

使用

//注入角度文件上传指令和service.angular.module('myApp',['angularFileUpload']); var MyCtrl = ['$ scope','$ upload',function($ scope,$ upload){

  $ scope.onFileSelect = function($ files){// $ files:选择一个文件数组,每个文件都有名称,大小和类型。

    for(var i = 0; i <$ files.length; i ++){var file = $ files [i];

      $ scope.upload = $ upload.upload({

        url:'server / upload / url',//upload.php script,node.js route或servlet url

        //方法:'POST'或'PUT',

        // header:{'header-key':'header-value'},

        // withCredentials:true,

        data:{myObj:$ scope.myModelObj},

        file:file,//或html5文件列表($ files)

        // fileName:'doc.jpg'或['1.jpg','2.jpg',...] //修改文件的名称

        //自定义文件formData名称('Content-Disposition'),服务器端文件变量名。 

        // fileFormDataName:myFile,//或多个文件(html5)的名称列表。默认是'文件' 

        //自定义数据如何添加到formData。有关示例代码,请参阅#40#issuecomment-28612000

        // formDataAppender:function(formData,key,val){}

      })。progress(function(evt){console.log('percent:'+ parseInt(100.0 * evt.loaded / evt.total));

      })。success(function(data,status,headers,config){//文件上传成功

        的console.log(数据);

      }); //。错误(...)

      //.then(success,error,progress); 

      //访问或附加事件监听器到底层的XMLHttpRequest。

      //。XHR(函数(XHR){xhr.upload.addEventListener(...)})

    } / *替代上传方式,使用文件的内容类型发送文件二进制文件。可用于将文件上传到CouchDB,imgur等... html5 FileReader是必需的。它还可以用于监视大型数据的正常http post / put请求的进度* /

    // $ scope.upload = $ upload.http({...})有关示例代码,请参阅88#issuecomment-31366487。

  };

}];

明天计划的事:

日常进行任务

遇到的问题:

研究了一天,貌似还是没搞懂

收获

FileUploader有了基本的了解


返回列表 返回列表
评论

    分享到