angular js 上傳插件 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文檔，再也不贅述。