angular js 上传插件 angular-file-upload 和 ng-file-upload 使用时注意事项

项目框架为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文档，不再赘述。