//上传图片文件var uploadFileImage = { //最大图片数 maxCountImgs : 5, //图片数 countImgs : 0, //图片最大值兆 max_size : 1000, //file 控件id列表集["user_head","two_code_img","brand_logo","aptitude"] files : null, //加载多个上传图片事件 loadfileEvent : function(){ for(var i in uploadFileImage.files){ uploadFileImage.fileEvent(uploadFileImage.files[i]); } }, //加载单个上传图片事件 fileEvent : function(file_id){ $("input[type=file]#"+file_id).change(function(){ if(!uploadFileImage.previewImage(this,uploadFileImage.max_size)){ //$(".error_"+file_id)[0].style.color="#F15350"; }else{ //$(".error_"+file_id)[0].style.color="#888888"; } }); }, //显示上传图片方法----file上传file控件，max_size最大小值 previewImage : function(file,max_size) { var isvalid = true; var upload_img_length = 0; if (!file.files || !file.files[0]) {return false; } //图片格式判断（gif|jpg|jpeg|png|GIF|JPG|PNG） if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test($(file).val())){ isvalid=false; } else { //图片大小判断 var filesize = $(file).get(0).files[0].size; var maxsize = 1024 * max_size;//512kb if (filesize > maxsize) { isvalid = false; } else { var reader = new FileReader(); reader.readAsDataURL(file.files[0]); reader.onload = function (evt) { if (evt.target.result != "") { var img = new Image(); img.src = evt.target.result; img.onload = function(){ uploadFileImage.countImgs++; //相关操作 //var img_src = evt.target.result; var img_src = uploadFileImage.resizeMe(this,640,file.files[0].type);//等比缩小 uploadFileImage.add_img(file,img_src);//显示本地图片 } } else{ isvalid = false;} } } } return isvalid; }, //重置图片大小方法返回base64 url--- img 图片 ，max_width 最大宽度,imgformat 保存格式 resizeMe : function( img, max_width,imgformat) { //创建画板 var canvas = document.createElement('canvas'); //图片宽 高设置 var width = img.width; var height = img.height; if (width > max_width) { height = Math.round(height *= max_width / width); width = max_width; } canvas.width = width; canvas.height = height; //img.crossOrigin = "*"; //图片画在 画板上 var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); //返回画板格式文件 return canvas.toDataURL(imgformat, 0.7); }, //删除图片方法 ----jqurey元素对象 delete_img : function($obj){ $obj.click(function(){ uploadFileImage.countImgs--; //$(".imgCount").text(countImgs + "/" + maxCountImgs); $("label[for=file_imgs]").show(); $(this).parent().remove(); }); }, //添加图片方法 add_img : function(file,img_src){ $(file).parent().children("img").attr("src",img_src); //$(file).parent().children("img").attr("src",img_src);//原尺寸 $(file).change(null); $(file).parent().parent().show(); $(file).removeAttr("id");//移除文件id //$(".imgCount").text(countImgs + "/" + maxCountImgs); uploadFileImage.delete_img($(file).parent().parent().children(".delete"));//绑定删除图片事件 if(uploadFileImage.countImgs < uploadFileImage.maxCountImgs){ $(file).parent().parent().parent().append(" <li style='display: none;'><label><input type='file' name='file_imgs' id='file_imgs' style='display: none;'/><img src=''/></label><i class='iconfont delete'></i></li>") uploadFileImage.files = ["file_imgs"]; uploadFileImage.loadfileEvent(); }else{ $("label[for=file_imgs]").hide(); } }}
转载于:https://www.cnblogs.com/mengwei-ziyun/p/5411467.html
相关资源：php h5 canvas jcrop 实现网页上传图片并对原图等比缩放后进行裁剪