使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器
ajax上传主要使用了 var reader = new FileReader() 此方法
js图片压缩主要是利用canvas进行的
源码：
/** * 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=""> <div>上传</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; }