h5上传图片的两种方法

第一种：ajax用formData对象上传

html页面

 <input accept="image/*"  type="file" id="uploadIMG"  οnchange="btnUploadFile(event)"/>

js代码

function btnUploadFile(e){
	var imgFile = e.target.files[0]; //获取图片文件
	var formData = new FormData();  // 创建form对象
	formData.append('file', imgFile);  // 通过append向form对象添加数据
	console.log(formData.file);   // 如需打印查看，需这么写，不能直接打印formData
	formData.append('other', 'other')  // 如果还需要传替他参数的话
	
	$.ajax({
	    url: url, //请求的接口地址
	    type: 'POST',
	    cache: false, //上传文件不需要缓存
	    data: formData,
	    processData: false, // 不要去处理发送的数据
	    contentType: false, // 不要去设置Content-Type请求头
	    success: function(data){
	        
	    },
	    error: function(err){
	        console.log(err)
	    }
	})
}

第二种：用base64的方法

html代码

<input accept="image/*"  type="file" id="uploadIMG"  οnchange="btnUploadFile(event)"/>
<img src="" alt="" id="showIMG">

js代码

function btnUploadFile(e,type){
        //获取图片
        var files = e.target.files;
        var file = files[0];
        // 接受 jpeg, jpg, png 类型的图片
        if (!/\/(?:jpeg|jpg|png)/i.test(file.type)){
            return;
        }
        var reader = new FileReader();
        reader.onload = function() { 
            var result = this.result;  //图片base64字符串
            uploadImg(result );
            $("#showIMG").attr("src",result);  //展示图片
        };
        reader.readAsDataURL(file);    //Base64
    }
 
function uploadImg(baseIMG){
   $.ajax({
       url: url,  //上传的地址
       type: "post",
       data: {"imgsrc": baseIMG},
       success: function(data){
        	console.log(data);
       }
   })
}