項目框架為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文檔,不再贅述。
