前端上传图片

前端图片的上传是一个很常见的功能，至于是否先进行压缩则需要具体情况具体分析了。

一、无压缩上传（formdata方式）

html代码

<div class="form-group"><label class="col-sm-4 control-label no-padding-right" for="form-field-tags">商品图片</label><form id="uploadForm1" enctype="multipart/form-data"><input id="file1" type="file" name="pic" style="padding-left: 25px;"/><input id="upload1" type="button" style="margin-left: 25px;" value="上传图片" onclick="formdataUploadImg('上传图片的接口','uploadForm1',pro_data,'img_url')"></form><div class="previewimg previewimg1"></div></div>

js代码

//formdata上传图片/*url:接口地址;formid:form表单元素的id;obj:页面对象，obj.ajax将会用作调取有关接口时的参数对象;str:obj.ajax中负责图片参数的参数名*/function formdataUploadImg(url,formid,obj,str){showMask();//显示遮罩层var formdata = new FormData($('#'+formid)[0]);//新建formdata对象$.ajax({url : url,type : 'POST',data : formdata,contentType: false,cache: false,processData: false,success : function(data){console.log(data);if(data.status == '1'){popup(data.msg);//提示消息hideMask();//隐藏遮罩层}else {popup(data.msg);//提示消息hideMask();//隐藏遮罩层obj.ajax[str] = data.result.imgurl1;//图片上传成功服务器后返回图片地址，保存在obj.ajax中，以便后续使用}}})}

二、压缩上传（canvas压缩）

html代码

<div class="form-group"><label class="col-sm-4 control-label no-padding-right" for="form-field-tags">商品图片</label><form id="uploadForm1" enctype="multipart/form-data"><input id="file1" type="file" name="pic" onclick="selectImg(this,pro_data.canvasimg)" style="padding-left: 25px;"/><input id="upload1" type="button" style="margin-left: 25px;" value="上传图片" onclick="canvasUploadImg()"></form><div class="previewimg previewimg1"></div></div>

js代码

//单击input选项框function selectImg(obj1,obj2) {    //选中图片后触发的事件    $(obj1).on("change",function(){        var fr = new FileReader();//创建filereader对象        fr.readAsDataURL(this.files[0]);//将图片文件读取为DataURL        var img = new Image();//创建一个图片        fr.onload = function() {            img.src = this.result;//result是文件读取的结果            img.onload = function () {                obj2.width=img.width;//获取所选择原图的宽                obj2.height=img.height;//获取所选择原图的高                var ratio1 = obj2.width/obj2.height;//判断原图是长图还是扁图                var ratio2,woh;                //700是长度为700px                if(ratio1 > 1) {                    ratio2 = obj2.width/700;                    woh = 'w';                }else if(ratio1 < 1) {                    ratio2 = obj2.height/700;                    woh = 'h';                }else{                    ratio2 = obj2.width/700;                    woh = 'woh';                };                obj2.img = img;                obj2.ratio = ratio2;                obj2.woh = woh;            }        }    });}//点击上传function canvasUploadImg() {    if(!$('#file1').val()){        popup('请先选择图片！');        return;    };    showMask();    var base64=imageData(pro_data.canvasimg);//获取base64编码值    base64=base64.substring(22);//去除base64编码值前22位无用数据    //var length=$('#img1')[0].files[0].size;    putb64(base64);//将图片传到服务器;并将返回的图片地址报存在obj.ajax中，以便后续使用}//使用canvas压缩图片并返回压缩后的base64编码值function imageData(obj) {    var canvas = document.createElement('canvas');    if(obj.woh == 'w'){        var w = 700;//图片宽        var h = obj.height/obj.ratio;//图片高    }else if (obj.woh = 'h'){        var h = 700;//图片高        var w = obj.width/obj.ratio;//图片高    }else if(obj.woh = 'woh') {        var w = 700;//图片宽        var h = obj.height/obj.ratio;//图片高    }    canvas.width = w;//canvas画布的宽    canvas.height = h;//canvas画布的高    var ctx = canvas.getContext('2d');    ctx.drawImage(obj.img, 0, 0, obj.width, obj.height, 0, 0,w,h);//画出图像    return canvas.toDataURL("image/jpg");//返回base64编码 };