前端上传图片

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

一、无压缩上传（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编码
 };