h5上传图片的两种方法

上传方法

一、ajax用formData对象上传

介绍一下formData：FormData对象把数据编译成键值对的形式，用XMLHttpRequest来发送数据。

注意:

1.要将编码方式(enctype属性) 设置成 multipart/form-data

2.不设置内容类型 (contentType: false)

3.不处理数据 (processData: false)

html代码：

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

js代码：

function btnUploadFile(e){
 
var imgFile = e.target.files[0]; //获取图片文件
var formData = new FormData();  // 创建form对象
formData.append('file', imgFile);  // 通过append向form对象添加数据
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"  onchange="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字符串
            $("#showIMG").attr("src",result);  //展示图片
        };
        reader.readAsDataURL(file);    //Base64
    }
 
function upload(baseIMG){
   $.ajax({
       url: url,  //上传的地址
       type: "post",
       data: {"imgsrc": baseIMG},
       success: function(data){
        
       }
   })
}