怎麼將圖片上傳封裝成指令？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【怎麼將圖片上傳封裝成指令？ 】
1.背景介紹
在js-task-9內，我們需要實現一個將本地圖片上傳的功能，並且能夠進行預覽並且將圖片的一些屬性展示出來。
為了實現這個功能，我們利用所學的angular知識來做一個功能比較簡單的圖片上傳元件。
2.知識剖析
指令：
1.angular指令本質上就是AngularJs擴充套件具有自定義功能的html元素的途徑。
2.內建指令，打包在AngularJs內部的指令，所有內部指令的名稱空間 都使用ng作為字首，3.所以在寫自定義指令的時候，避免用ng作為指令命名的字首。
4.建立指令的方式有四種，在指令裡用 restrict屬性控制:E:元素A:屬性(這個是比較推薦的方式)C:css類M:註釋
5.向指令中傳遞資料，用template屬性
元件功能：
1.點選按鈕上傳圖片
2.圖片能在本地預覽
3.顯示圖片資訊，顯示上傳進度
4.點選上傳按鈕上傳到伺服器
5.點選刪除按鈕，刪除。
6.上傳按鈕只能按一次
</br>
3.常見問題
如何實現元件?
</br>
4.解決方案
</br>
5.編碼實戰
html模板：
<script type="text/ng-template" id="imgLoad.html">
<div class="box">
<form id="form" enctype="multipart/form-data">
<label for="imgFile">上傳:</label>
<label for="imgFile" class="btn btn-primary btn-md" ng-disabled="upDisabled">選擇圖片</label><span>圖片最大為2000000byte(約2MB)</span>
<input type="file" id="imgFile">
</form>
<table class="table">
<thead>
<tr>
<th>名字</th>
<th>大小</th>
<th>進度</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
<tbody >
<tr ng-if="hasImg">
<td>{{name}}</td>
<td>{{size}}</td>
<td><progress id="progress" ng-value="progress" max="100"></progress><span>{{progress}}</span></td>
<td>{{status}}</td>
<td>
<div class="btn-group">
<button class='btn btn-success' ng-disabled="upDisabled" ng-click="upLoad()">上傳</button>
<button class="btn btn-danger" ng-click="delete()">刪除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</script>自定義指令：
myApp.directive('imgUpload', function ($http) { return { restrict: 'AEC', replace: true, transclude: true, templateUrl: "imgLoad.html", link: function (scope, ele, attr) {
scope.imgFile = document.getElementById('imgFile');
scope.img = document.getElementById('img');
scope.progress='';
scope.imgFile.onchange = function () { if(scope.imgFile.files[0].size>=2000000){
alert('圖片大小超限~')
}else{ var reader = new FileReader();
reader.readAsDataURL(scope.imgFile.files[0]);
scope.$apply(function () {
scope.hasImg = scope.imgFile.files[0];
scope.name = scope.imgFile.files[0].name;
scope.size = scope.imgFile.files[0].size > 1024 * 1024 ? (scope.imgFile.files[0].size / 1024 / 1024).toFixed(2) + 'MB' : (scope.imgFile.files[0].size / 1024).toFixed(2) + 'KB';
})
}
};
scope.delete = function () {
scope.img.src = '';
scope.hasImg = false;
scope.upDisabled = false;
};
scope.upLoad = function () {
$http({ method: 'post', url: '/carrots-admin-ajax/a/u/img/task', headers: {'content-type': undefined}, uploadEventHandlers:{ progress: function(e) { if (e.lengthComputable) {
scope.progress = Math.round(e.loaded * 100 / e.total);
}
}
}, transformRequest: function () { var formData = new FormData();
formData.append('file', scope.hasImg); return formData;
}
}).then(function successCallback(res) {
scope.status = res.data.message;
scope.src = res.data.data.url;
scope.upDisabled = true;
},function errorCallback(res) {
scope.status = res.data.message;
scope.upDisabled = true;
})
}
}
};
});</br>
6.擴充套件思考
還應該新增一些什麼功能?
還應該新增上傳的檔案是否是圖片的驗證。
</br>
7.參考文獻
$http服務
FileReader : EventTarget
檔案和二進位制資料的操作
</br>
8.更多討論
1.圖片上傳的document.getElementById('file').files為何是一個數組？
圖片上傳可以一次上傳多個檔案，故files物件是一個數組。
2.如何同時上傳多個檔案？
input中新增multiple="multiple"屬性，則可一次性選擇多個檔案，document.getElementById('file').files中有多個file檔案.
3.當我們再次選擇檔案上傳時，files陣列會發生什麼？
當我們再次選擇檔案上傳時，此files陣列會被覆蓋並非新增檔案到此陣列中。
</br>
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地