angularjs 實現多個圖片上傳及預覽
阿新 • • 發佈:2019-02-14
ict red input 刪除按鈕 cto ges pat ack actor
1 <div class="form-group"> 2 <label>上傳申請單</label> 3 <ul class="list_img clearfix"> 4 <li ng-repeat="imageSrc in imgshows track by $index"> 5 <img ng-src="{{imageSrc}}"alt="" class="imgs"> //顯示圖片 6 <span ng-click="uploadimg_del($index, imgshows)" class="delete">X</span> //刪除按鈕 7 </li> 8 <li class="add_btn"> 9 <label class="bgimg"for="fileImg"></label> 10 <div class="file-box"> 11 <input type="file" name="upload_img" file="upload_img" placeholder="選擇圖片" accept="image/*" class="file-btn" id="fileImg" /> 12 </div> 13</li> 14 </ul> 15 </div>
上面是HTML代碼
1 //圖片讀取 2 app.factory(‘fileReader‘, [‘$q‘, ‘$log‘, function($q, $log) { 3 var onLoad = function(reader, deferred, scope) { 4 return function() { 5 scope.$apply(function() { 6 deferred.resolve(reader.result); 7 }); 8 }; 9 }; 10 11 var onError = function(reader, deferred, scope) { 12 return function() { 13 scope.$apply(function() { 14 deferred.reject(reader.result); 15 }); 16 }; 17 }; 18 19 var getReader = function(deferred, scope) { 20 var reader = new FileReader(); //fileReader 21 reader.onload = onLoad(reader, deferred, scope); 22 reader.onerror = onError(reader, deferred, scope); 23 return reader; 24 }; 25 26 var readAsDataURL = function(file, scope) { 27 var deferred = $q.defer(); 28 var reader = getReader(deferred, scope); 29 //將圖片轉換為Base64 30 reader.readAsDataURL(file); 31 return deferred.promise; 32 33 }; 34 35 return { 36 readAsDataUrl: readAsDataURL 37 }; 38 }]); 39 40 //文件預覽 41 app.directive(‘file‘, [‘$parse‘, ‘fileReader‘, function($parse, fileReader) { 42 return { 43 restrict: ‘A‘, 44 link: function(scope, element, attrs, ngModel) { 45 var model = $parse(attrs.file); 46 var modelSetter = model.assign; 47 element.bind(‘change‘, function(event) { 48 scope.$apply(function() { 49 modelSetter(scope, element[0].files[0]); 50 }); 51 //附件預覽 52 scope.imgupload = (event.srcElement || event.target).files[0]; 53 getFile(scope.imgupload, scope); 54 //獲得預覽圖地址並且把file對象放入上傳合集內 55 function getFile(imgupload, scope) { 56 if (!imgupload) { 57 return; 58 } 59 fileReader.readAsDataUrl(imgupload, scope) 60 .then(function(result) { 61 scope.imgshows.push(result); 62 var file = document.querySelector(‘input[type=file]‘).files[0]; 63 scope.uploadimgs.push(file); //這裏是放著傳給後臺的數據file,下面controller的時候會有 64 angular.element(document.querySelector("#fileImg")).val(‘‘); 65 }); 66 } 67 }); 68 } 69 }; 70 }]);
$scope.imgshows = []; $scope.uploadimgs = []; //上傳圖片合集放的是file對象 $scope.uploadimg_del = function(index, imgs) { $scope.imgshows.splice(index, 1); $scope.uploadimgs.splice(index, 1); }
//提交圖片及其它信息 $scope.addSample = function(sample, loding) { $scope.isSubmit(); var fd = new FormData(); //初始化一個FormData實例 fd.append(‘patientid‘, sample.patientId); fd.append(‘imgType‘, sample.imgType); fd.append(‘taskId‘, sample.taskId); fd.append(‘postCompany‘, sample.postCompany); fd.append(‘postNumber‘, sample.postNumber); for (var i = 0; i < $scope.uploadimgs.length; i++) { fd.append(‘file‘, $scope.uploadimgs[i]) } if ($scope.sampleForm.$valid && $scope.uploadimgs.length > 0) { $loading.start(loding); //正常提交表單 $http({ method: ‘post‘, data: fd, headers: { ‘Content-Type‘: undefined }, transformRequest: angular.identity, url: baseUrl + ‘list_up/‘ }).then(function(response) { $loading.finish(loding); $scope.confirm(response.data.message); }, function() { $loading.finish(loding); $scope.alert(‘提交失敗請與管理員聯系!‘); }) } else { // $scope.submitted = true; $scope.alert(‘提交失敗正確填寫!‘); } }
angularjs 實現多個圖片上傳及預覽