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文檔,不再贅述。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM