您好,登錄后才能下訂單哦!
小編給大家分享一下Angularjs如何實(shí)現(xiàn)多圖片上傳預(yù)覽功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
最近要實(shí)現(xiàn)一個(gè)多圖片上傳的預(yù)覽功能,網(wǎng)上有很多例子大多不太完整,我就把他們的整合了下并且加了一些功能和界面,我們只需要調(diào)用一條指令就可以實(shí)現(xiàn),但傳給后臺(tái)還需要額外的代碼,會(huì)在后面controller里介紹。不知道封裝的是否符合標(biāo)準(zhǔn),還希望大家一起討論下,如果有時(shí)間封裝下Angular4的圖片上傳和預(yù)覽分享給大家。
圖片上傳的預(yù)覽,我們最主要解決的是拿到input的on-change事件,再是讀取圖片,讀取圖片我們需要用到FileReader。
我們先寫(xiě)一個(gè)讀取圖片的服務(wù),這是網(wǎng)上的一位大佬寫(xiě)的,我就直接拿了過(guò)來(lái)
/** * 圖片上傳獲取返回的url */ app .factory('fileReader', ["$q", "$log", function($q, $log){ var onLoad = function(reader, deferred, scope) { return function () { scope.$apply(function () { deferred.resolve(reader.result); }); }; }; var onError = function (reader, deferred, scope) { return function () { scope.$apply(function () { deferred.reject(reader.result); }); }; }; var getReader = function(deferred, scope) { var reader = new FileReader(); //fileReader reader.onload = onLoad(reader, deferred, scope); reader.onerror = onError(reader, deferred, scope); return reader; }; var readAsDataURL = function (file, scope) { var deferred = $q.defer(); var reader = getReader(deferred, scope); reader.readAsDataURL(file); return deferred.promise; }; return { readAsDataUrl: readAsDataURL }; }])
我們現(xiàn)在有了圖片的讀取,我們?cè)賮?lái)搞定圖片的on-change事件
/** * 圖片上傳預(yù)覽 */ app .directive('file', ['$parse', 'fileReader', function ($parse, fileReader) { return { restrict: 'A', link: function(scope, element, attrs, ngModel) { var model = $parse(attrs.file); var modelSetter = model.assign; console.log(modelSetter) element.bind('change', function(event){ scope.$apply(function(){ modelSetter(scope, element[0].files[0]); }); //附件預(yù)覽 scope.imgupload = (event.srcElement || event.target).files[0]; getFile(scope.imgupload, scope); //獲得預(yù)覽圖地址并且把file對(duì)象放入上傳合集內(nèi) function getFile (imgupload, scope) { if(!imgupload) { return; } fileReader.readAsDataUrl(imgupload, scope) .then(function(result) { scope.imgshows.push(result) var file = document.querySelector('input[type=file]').files[0]; scope.uploadimgs.push(file)//這里是放著傳給后臺(tái)的數(shù)據(jù)file,下面controller的時(shí)候會(huì)有 }); }; }); } }; }])
這里就是提供上傳圖片預(yù)覽的樣式,還有預(yù)覽圖刪除的功能
app .directive('uploadimg', function () { return { restrict: 'E', scope: { uploadimgs: "=" }, templateUrl: './js/directives/uploadimg/uploadimg.html', link: function(scope, element, attrs) { scope.imgshows = []//預(yù)覽圖片合集放的是src scope.uploadimg_del = function(index,imgs) { scope.imgshows.splice(index,1); scope.uploadimgs.splice(index,1); } } } })
<style type="text/css"> .fileupload { width: 100px; height: 100px; border: 1px dotted #ccc; display: inline-block; } .fileupload-icon { font-size:32px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style> <div> <div class="fileupload pos-rlt" ng-repeat="imageSrc in imgshows"> <img ng-src="{{imageSrc}}" class="pos-rlt" width=100%; height=100%;/> <i class="icon ion-close-circled" ng-click="uploadimg_del($index, imgshows)"></i> </div> <div class="fileupload pos-rlt clear" > <i class="icon ion-plus-round fileupload-icon"></i> <input type="file" name="upload_img" file="upload_img" placeholder="選擇圖片" accept="image/png,image/gif,image/jpeg,image/jpg" > </div> </div> </label>
最后的調(diào)用也很簡(jiǎn)單
我們只需要在2個(gè)地方加代碼一個(gè)是在界面,一個(gè)是在Controller里
<uploadimg uploadimgs="uploadimgs"></uploadimg>
這個(gè)是在Controller里的,這是用來(lái)傳給后臺(tái)的數(shù)據(jù)集合,我們需要傳給后臺(tái)的是file對(duì)象
$scope.uploadimgs = []//上傳圖片合集放的是file對(duì)象
如何傳給后臺(tái)呢,直接附上代碼,其實(shí)不難
$scope.save = function() { var Fromdata = { 'name': $scope.form.name, 'desc': $scope.form.descr, 'price': $scope.form.price, 'status': $scope.form.status?1:0, } var uploadData = createFromData(Fromdata) for(var i = 0; i < $scope.uploadimgs.length; i++) { uploadData.append('upload_imgs', $scope.uploadimgs[i]) } $http({ method:'POST', url:"后臺(tái)地址", data: fd, headers: {'Content-Type':undefined}, transformRequest: angular.identity }) .success( function(response){ //上傳成功的操作 }); } //構(gòu)造FormData //@param 是一個(gè)對(duì)象 function createFromData(Fromdata) { var fd = new FormData(); for(key in Fromdata) { fd.append(key,Fromdata[key]); } return fd }
最后給大家看下預(yù)覽圖
看完了這篇文章,相信你對(duì)“Angularjs如何實(shí)現(xiàn)多圖片上傳預(yù)覽功能”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。