记录这个文章为了方便我之后维护和修改之后上传所遇到的问题
目前公司用的angular.js,我也是刚到公司,对angular不是很了解,比较工作经验也没有特别丰富,需要学习的东西还有许多,所以算是一点自己学习过程中的小笔记
今天要记录的是angular.js基于FileUploader上传,关于FileUploader请看
https://blog.csdn.net/zcl_lov…
看了这篇文章,应该很多小伙伴都不需要看一下内容啦。但是我还是想记录一下,这样印象也要深刻一点
关于引用,我就不说啦,直接说我在项目中的应用:
首先:
var uploader= new FileUploader({
url:需要上传的地址,
autoUpload: 是否将文件添加到队列后自动上传(Boolean),
headers: 与文件一起发送的头文件,只适合支持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;
以上是我所总结的东西,虽然文档里面有,但是总结一次印象挺深刻的,哈哈哈