记录这个文章为了方便我以后维护和修改以后上传所遇到的问题
目前公司用的angular.js,我也是刚到公司,对angular不是很了解,比较工做经验也没有特别丰富,须要学习的东西还有许多,因此算是一点本身学习过程当中的小笔记
今天要记录的是angular.js基于FileUploader上传,关于FileUploader请看
https://blog.csdn.net/zcl_lov...
看了这篇文章,应该不少小伙伴都不须要看一下内容啦。可是我仍是想记录一下,这样印象也要深入一点
关于引用,我就不说啦,直接说我在项目中的应用:
首先:html
var uploader= new FileUploader({ url:须要上传的地址, autoUpload: 是否将文件添加到队列后自动上传(Boolean), headers: 与文件一块儿发送的头文件,只适合支持html5的浏览器,根据实际状况配置 });
而后:根据需求,筛选我须要的文件类型html5
uploader.filters.push({ name: 自定义滴,想写什么写什么,哈哈哈, fn: function(item) { //item就是你上传的文件这里面你就能够写你须要筛选的条件,下面举一个例子,筛选文件的大小 //$scope.maxSize是我指令传过来的参数 var fileSizeValid = file.size <= $scope.maxSize; //文件大小限制; return fileSizeValid ; } })
固然,过滤筛选的条件和方法也有不少不少,要是你上传封装的是一个指令,你能够把你所须要的条件经过指令传过来,更具本身的需求作不一样的判断浏览器
最后:筛选完以后,就能够调用FileUploader促发的不一样函数了。函数
//添加一个文件失败后触发 uploader.onWhenAddingFileFailed = function(item , filter, options) {}; // 向队列中添加一个单独的文件后触发 uploader.onAfterAddingFile = function(fileItem) {}; //在全部被拖拽或被选中的文件添加到队列后触发。 uploader.onAfterAddingAll = function(addedFileItems) {}; //在上传一个文件对象以前触发 uploader.onBeforeUploadItem = function(item) {}; //文件正在上传中触发 uploader.onProgressItem = function(fileItem, progress) {}; //文件上传进度 uploader.onProgressAll = function(progress) {}; //关于上传队列的进展 uploader.onSuccessItem = function(fileItem, response, status, headers) {}; //上传出错时触发 uploader.onErrorItem = function(fileItem, response, status, headers) {}; //取消上传时触发 uploader.onCancelItem = function(fileItem, response, status, headers) {}; //在文件上传完成时触发(独立操做成功) uploader.onCompleteItem = function(fileItem, response, status, headers) {}; //上传一个完整的队列时加载全部的文件,或上传一个单独的文件时加载该文件时触发 uploader.onCompleteAll = function() {}; return uploader;
以上是我所总结的东西,虽然文档里面有,可是总结一次印象挺深入的,哈哈哈学习