使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

/** * js使用form上传图片，支持本地预览选中的图片,支持携带自定义参数* @param {string} ???params.previewImgId ?????预览图片控件id,可以预览上传图片* @param {string} ???params.url ??????????????提交上传的url* @param {function} ?params.success ??????????上传接口的回调函数* @param {boolean} ??params.params ???????????上传时提交的其它参数 有几个传几个，系统会把 previewImgId ?url success 这三个参数过滤后的其它参数传给服务器 ?使用示例： ?<img src="" id="yulan"> ?<div onclick="shangchuan()">上传</div> function shangchuan(){ ???????jsUploadImage({"diyparam":"1111","diyparam1":"222","previewImgId":"yulan","url":"user.php?act=photosave","success":function(data){ ???????????console.log(data); ???????}}) ??};*/function jsUploadImage(params){ ??????//初始化数据 ???params.previewImgId = params.previewImgId || ""; ???params.url = params.url || ""; ???params.success = params.success || ""; ???//创建file上传控件 ????if(document.getElementById("imgFile")==null){ ????????var ?inputEle=document.createElement("input"); //创建input ??????????inputEle.id="imgFile"; ??????????inputEle.type="file"; ?????????inputEle.accept="image/png,image/jpeg,image/jpeg,DCIM/*;capture=camera"; ?????????inputEle.style="display:none;"; ?????????inputEle.onchange = function(){ ????????????showPhoto() ????????}; ????????inputEle.multiple = false; ????????document.body.appendChild(inputEle); ?????????????} ???var ?imgFile = document.getElementById("imgFile"); ????imgFile.click(); ?????????????//选中文件后的预览图片 ???function showPhoto(){ ???????//文件对象 ?????????var file = document.getElementById("imgFile").files[0]; ???????????????//读取后辍,判断是否允许的文件 ???????var fileSuffix = file.name.substring(file.name.length-4); ???????var allowFile = ".jpg|.png|.gif"; ???????if(allowFile.indexOf(fileSuffix.toLowerCase())==-1) { ???????????alert("请使用"+allowFile+"后辍的文件"); ???????????return false; ???????} ???????????????//如果传了显示控件的id,显示本地预览 ???????var reader = new FileReader() ???????reader.readAsDataURL(file); ???????reader.onload = function(e){ ????????????var imgBase64Data = e.target.result; ???????????????????????//显示预览 ??????????if("" != ?params.previewImgId) ?document.getElementById(params.previewImgId).src = imgBase64Data; ?????????????????????//如果不压缩直接上传 ???????????//savePhoto(imgBase64Data) ??????????????????????//对图片进行缩小处理,然后再上传 ???????????compressPhoto(imgBase64Data,1000,1000,function(imgBase64DataBack){ ???????????????????????????????????????????????//提交服务保存数据 ???????????????savePhoto(imgBase64DataBack) ???????????}); ?????????????????????} ???????????????????} ???????//提交数据 ???function savePhoto(base64Data){ ???????var formData = new FormData(); ????????????????//加入其它参数 ???????for(var key in params){ ?????????if(key!="previewImgId" && key!="url" && key!="success" ){ ?????????????formData.append(key, params[key]); ?????????} ???????} ???????????????//加入文件参数 ?利用base64 ???????formData.append("imgFile",encodeURIComponent(base64Data)); ???????//加入文件参数 ?file控件上传 , 但这种试就不支持对图片压缩了，所以手机端不采用这种方式 ???????//formData.append(‘imgFile‘, file); ???????????????//ajax上传 ???????$.ajax({ ???????????url:params.url, ???????????type: ‘POST‘, ???????????cache: false, ???????????dataType:"json", ???????????data: formData, ???????????processData: false, ???????????contentType: false ???????}).done(function(res) { ???????????if(params.success!=""){ ???????????????params.success(res); ???????????} ???????}).fail(function(res) { ??????????alert("上传失败"); ???????}); ???}} ??/** * js利用canvas对图像进行压缩处理* @param {string} ???imgBase64Data ????图像base64数据* @param {string} ???maxWidth ?????????最大高度* @param {function} ?maxHeight ????????最大宽度* @param {boolean} ??fun ??????????????回调函数，参数为处理后的图像数据 ?使用示例： ?compressPhoto(imgBase64Data,maxWidth,maxHeight,function(imgBase64Data){ ?????//返回图片数据后的处理 ?})*/function compressPhoto(imgBase64Data,maxWidth,maxHeight,fun){ ???var ?img = new Image(); ???// 缩放图片需要的canvas ???var canvas = document.createElement(‘canvas‘); ???var context = canvas.getContext(‘2d‘); ???// base64地址图片加载完毕后 ???img.onload = function () { ???????// 图片原始尺寸 ???????var originWidth = this.width; ???????var originHeight = this.height; ???????????????????// 目标尺寸 ???????var targetWidth = originWidth, targetHeight = originHeight; ???????// 图片尺寸超过400x400的限制 ???????if (originWidth > maxWidth || originHeight > maxHeight) { ???????????if (originWidth / originHeight > maxWidth / maxHeight) { ???????????????// 更宽，按照宽度限定尺寸 ???????????????targetWidth = maxWidth; ???????????????targetHeight = Math.round(maxWidth * (originHeight / originWidth)); ???????????} else { ???????????????targetHeight = maxHeight; ???????????????targetWidth = Math.round(maxHeight * (originWidth / originHeight)); ???????????} ???????} ???????// canvas对图片进行缩放 ???????canvas.width = targetWidth; ???????canvas.height = targetHeight; ???????// 清除画布 ???????context.clearRect(0, 0, targetWidth, targetHeight); ???????// 图片压缩 ???????context.drawImage(img, 0, 0, targetWidth, targetHeight); ???????var base=canvas.toDataURL("image/jpeg",0.7);//canvas转码为base64 ???????????????????????fun(base);//返回处理 ????}; ???img.src = imgBase64Data;}

<img src="" id="yulan"><div onclick="shangchuan()">上传</div><script type="text/javascript"> function shangchuan(){ ???????jsUploadImage({"diyparam":"1111","diyparam1":"222","previewImgId":"yulan","url":"user.php?act=photosave","success":function(data){ ???????????console.log(data); ???????}}) ??};</script>