html代碼：

當input出發change事件會調用touchUpdateImg方法，傳入file對象和需要展示得到imgsmall屬性，通過FileReader對象讀取文件對象，我使用了apply進行了監聽，之前不使用apply進行了監聽，之前不使用apply時，沒有實時展示圖片。

<div class="imglist"><div class="imglist-title">商品相冊</div><div class="imglist-content"><div class="imglist-item"><input class="oneimg" type="file" name="oneimg" onchange="angular.element(this).scope().touchUpdateImg(this.files,'imgSmall1')" ng-model="imgSmall1"><img class="handle-inp" id="imgSmall1" ng-src="{{imgSmall1}}" /><div class="mast-delete" ng-if="deleteImg[0]"><div class="delete-img" ng-click="touchDeleteImg(0,'imgSmall1')">x</div></div></div><div class="imglist-item"><input class="oneimg" type="file" name="oneimg" onchange="angular.element(this).scope().touchUpdateImg(this.files,'imgSmall2')" ng-model="imgSmall2"><img class="handle-inp" id="imgSmall2" ng-src="{{imgSmall2}}" /><div class="mast-delete" ng-if="deleteImg[1]"><div class="delete-img" ng-click="touchDeleteImg(1,'imgSmall2')">x</div></div></div><div class="imglist-item"><input class="oneimg" type="file" name="oneimg" onchange="angular.element(this).scope().touchUpdateImg(this.files,'imgSmall3')" ng-model="imgSmall3"><img class="handle-inp" id="imgSmall3" ng-src="{{imgSmall3}}" /><div class="mast-delete" ng-if="deleteImg[2]"><div class="delete-img" ng-click="touchDeleteImg(2,'imgSmall3')">x</div></div></div><div class="imglist-item"><input class="oneimg" type="file" name="oneimg" onchange="angular.element(this).scope().touchUpdateImg(this.files,'imgSmall4')" ng-model="imgSmall4"><img class="handle-inp" id="imgSmall4" ng-src="{{imgSmall4}}" /><div class="mast-delete" ng-if="deleteImg[3]"><div class="delete-img" ng-click="touchDeleteImg(3,'imgSmall4')">x</div></div></div></div></div>

js代碼

model的代碼，我在model了做了初始化的操作，就是沒選則時默認圖片

service.goodsObj['imgArr'] = {'imgBig':'image/supplier/add_big2.png','imgSmall1':'image/supplier/add_small2.png','imgSmall2':'image/supplier/add_small2.png','imgSmall3':'image/supplier/add_small2.png','imgSmall4':'image/supplier/add_small2.png'};

controller里是獲取model里定義的數組，進行一開始的賦值

$scope.imgObj = AddGoodsModel.goodsObj['imgArr'];$scope.file = AddGoodsModel.goodsObj['file'];$scope.imgBig = $scope.imgObj['imgBig'];$scope.imgSmall1 = $scope.imgObj['imgSmall1'];$scope.imgSmall2 = $scope.imgObj['imgSmall2'];$scope.imgSmall3 = $scope.imgObj['imgSmall3'];$scope.imgSmall4 = $scope.imgObj['imgSmall4']; // 上傳圖片function _touchUpdateImg(obj,imgobj){var file = obj[0];console.dir(file);// 判斷文件的類型var name = file['name'];var postfix = name.substring(name.lastIndexOf(".")+1).toLowerCase();if(postfix !="jpg" && postfix !="png" && postfix != "jpeg" && postfix != "gif"){$scope.toast('上傳的文件的類型只能是jpg、png、jpeg、gif');return false;}// 判斷是不是大圖if(imgobj == 'imgBig'){AddGoodsModel.emptyFile = false;$scope.emptyFile = false;}// 獲取文件讀取對象var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) { $scope.$apply(function () {// 判斷文件的大小if(file['size'] > 1048576){dealImage(e.target.result,angular.element('#'+imgobj)[0],function(base64){$scope[imgobj] = base64;$scope.imgObj[imgobj] = encodeURI($scope[imgobj]);$scope.file[imgobj]['size'] = file['size'];$scope.file[imgobj]['type'] = file['type'];});$scope.toast('文件太大，請稍等！');return false;} $scope[imgobj] = e.target.result;$scope.imgObj[imgobj] = encodeURI($scope[imgobj]);$scope.file[imgobj]['size'] = file['size'];$scope.file[imgobj]['type'] = file['type'];})} }// 使用canvas對圖片進行繪制function dealImage(path, obj, callback){var img = new Image();img.src = path;img.onload = function(){var that = this;// 默認按比例壓縮var w = that.width,h = that.height,scale = w / h;w = obj.width || w;h = obj.height || (w / scale);var quality = 0.8; // 默認圖片質量為0.7//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 創建屬性節點var anw = document.createAttribute("width");anw.nodeValue = w*1.5;var anh = document.createAttribute("height");anh.nodeValue = h*1.5;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w*1.5, h*1.5);// 圖像質量if(obj.quality && obj.quality <= 1 && obj.quality > 0){quality = obj.quality;}// quality值越小，所繪制出的圖像越模糊var base64 = canvas.toDataURL('image/jpeg', quality );// 回調函數返回base64的值callback(base64);}}

總結

以上是生活随笔為你收集整理的angular图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。