猴王水果竞猜网站建设,商城页面,淄博学校网站建设方案,电影网站怎么做优化html代码#xff1a;
当input出发change事件会调用touchUpdateImg方法#xff0c;传入file对象和需要展示得到imgsmall属性#xff0c;通过FileReader对象读取文件对象#xff0c;我使用了apply进行了监听#xff0c;之前不使用apply进行了监听#xff0c;之前不使用app…
html代码
当input出发change事件会调用touchUpdateImg方法传入file对象和需要展示得到imgsmall属性通过FileReader对象读取文件对象我使用了apply进行了监听之前不使用apply进行了监听之前不使用apply进行了监听，之前不使用apply时没有实时展示图片。
div classimglistdiv classimglist-title商品相册/divdiv classimglist-contentdiv classimglist-iteminput classoneimg typefile nameoneimg onchangeangular.element(this).scope().touchUpdateImg(this.files,imgSmall1) ng-modelimgSmall1img classhandle-inp idimgSmall1 ng-src{{imgSmall1}} /div classmast-delete ng-ifdeleteImg[0]div classdelete-img ng-clicktouchDeleteImg(0,imgSmall1)x/div/div/divdiv classimglist-iteminput classoneimg typefile nameoneimg onchangeangular.element(this).scope().touchUpdateImg(this.files,imgSmall2) ng-modelimgSmall2img classhandle-inp idimgSmall2 ng-src{{imgSmall2}} /div classmast-delete ng-ifdeleteImg[1]div classdelete-img ng-clicktouchDeleteImg(1,imgSmall2)x/div/div/divdiv classimglist-iteminput classoneimg typefile nameoneimg onchangeangular.element(this).scope().touchUpdateImg(this.files,imgSmall3) ng-modelimgSmall3img classhandle-inp idimgSmall3 ng-src{{imgSmall3}} /div classmast-delete ng-ifdeleteImg[2]div classdelete-img ng-clicktouchDeleteImg(2,imgSmall3)x/div/div/divdiv classimglist-iteminput classoneimg typefile nameoneimg onchangeangular.element(this).scope().touchUpdateImg(this.files,imgSmall4) ng-modelimgSmall4img classhandle-inp idimgSmall4 ng-src{{imgSmall4}} /div classmast-delete ng-ifdeleteImg[3]div classdelete-img ng-clicktouchDeleteImg(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);}}
