fileupload指令實現

fileupload指令的實現依賴於fileUploadService與imgupload指令。

fileupload指令的使用：

fileUploadService:

1. uidBase = 10000000;//生成文件上傳標識用  fileInputId = 'uploadFileSubmitInput';

2. service對象中的方法：

1）獲取文件上傳標識：'fileupload_' + (uidBase++)

2）建立上傳文件的原生dom元素：input[type='file'], append在body最末，hidden.  建立前要判斷是否存在uploadFileSubmitInput元素，若是存在，要刪除。

3) native方式上傳文件：

獲取fileElem.files[0]（文件對象）——＞建立promise對象——>建立xhr對象——>監聽load事件，回調是defer.resolve(e.target.response)——>建立formData——>formdata.append(文件對象)——>xhr.send(data);

load事件回調函數：參數爲e, 文件地址在e.target.response.data (response結構是後端定義的)

 

fileupload directive:

1. template: 應該是把fileupload綁定的元素整個換掉了

2

2. replace: true. transclude: true, require: '?ngModel'--->picUrl

transclude用途：

3. 獲取attr引用對象的值：scope.$eval(attrs.ngfOptions);

4. 上傳圖片完成的回調：參數： data(圖片url) ; ngModelCtrl.$setViewValue(data);  scope.$apply();

5. 上傳圖片按鈕點擊的回調：設置fileElement可接受的fileType,方法以下圖1——>註冊fileElem的change事件（files = e.target.files || e.dataTransfer.files）——>判斷files[0].size——>判斷是否顯示文件名字(files[0].name)

——>調用service native方式上傳——>成功後執行回調，參數爲res.data(文件url)）——>觸發fileElem的click事件（會彈出文件選擇框）

 

imgUpload與fileupload相似，區別在於上傳圖片完成的回調函數中new Image對象，將圖片縮略圖添加到上傳按鈕下面。

 

PS：拖拽上傳圖片，應該是在拖拽區域監聽了drop事件，回調是將事件攜帶的參數（圖片對象）上傳到服務端。問題是drag事件如何攜帶的圖片或者文件數據呢？

——e.dataTransfer.files就能夠了.drop事件要禁用瀏覽器默認處理。對於組件來講手動觸發fileElem.change事件便可。