项目框架为angular js,需要用到文件上传,百度之后先选择了angular-file-upload,githuab上API文档很全,想要具体了解,可以仔细研究一下。在这里简单回顾一下自己使用的插件的部分功能和需要注意的事项。
1.引入angular-file-upload.js,放在angular js 之后。
2.将文件注入angular js 的模块中,如 var app = angular.module (" myapp ", [ ' angularFileUpload ' ] );
3.下面就是具体使用了,API文档中 介绍的很详细,支持多种上传样式,如单选,多选,单击选择,拖拽选择等。可以具体研究。我只用到了单选同时也是单击选择。
<div ng-app="myapp">
<div ng-controller="appCtrl">
<input type="file" nv-file-select uploader = "uploader">
<ul>
<li ng-repeat="item in uploader.queue">
<span>{{item.file.name}}</span>
</li>
</ul>
</div>
</div>
其中input file 为上传按钮,它本身的样式比较简单,我这里只需要一个上传按钮,只能用a标签包住input,并将input 设为透明,来实现我想要的按钮样式。
li标签repeat 出来的就是上传后的文件。queue就是上传后的队列。当然我这里每个文件后还提供删除按钮,这样用他的队列就不太好改,我也尝试过。最终决定自己做个repeat 把上传后的文件名显示在页面上,同时提供删除方法。
4.js中有许多属性,方法和回调函数。具体可以研究API.
controller中同样需要注入。例
myapp.contrller("appCtrl",function(FileUploader){
var uploader = $scope.uploader = new FileUploader({
url:"" //上传文件的url
formData:[Array] //跟随上传文件同时上传的参数。[{}]参数
autoUpload:true //自动上传
})
})
alias 里面的名称需要与后台代码中的一致,默认为file.
回调函数有成功后,添加后失败后执行的操作,不再一一赘述。
说了半天,重点来了,插件的兼容性如何,本来加上列出的shim.js等等,以为会兼容,但在IE9上始终上传失败,报错。
typeErr.最终没办法只好再换一个插件即ng-file-upload.先说一下这个插件的兼容性。
它是可以兼容到IE9,对于IE9及一下,可以引入shim.js和一段
<!--[if lte IE 9]>
<script>
FileAPI = {
jsUrl: 'FileAPI.min.js',
flashUrl: 'FileAPI.flash.swf',
}
</script>
<script src="ng-file-upload-shim.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
注意这段需要放在shim.js 前面,同时 包含FileAPI.min.js和FileAPI.flash.swf这两个文件。
具体使用和angular-file-upload,相似,就是所用文件和格式不同。详细可以研究API文档,不再赘述。