//1,第一步读取用户选中的文件
<input type="file" accept="image/*" onchange = "selectedFile()"/> function selectedFile(){
var oFile = event.target.files[0]; var fileReader = new FileReader(); fileReader.onload = function(){
var base64URL = this.result ;
var blob = convertBase64UrlToBlob(base64URL,'image/jpeg');
uploadImage(blob);
} fileReader.readAsDataURL(oFile)
} //2,第二步将base64图片转换为Blob对象 function convertBase64UrlToBlob(urlData, filetype){
//去掉url的头,并转换为byte
var bytes = window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Int8Array(ab);
var i;
for (i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type : filetype});
} //3,第三步使用formData上传数据
function uploadImage(blob){
var formData = new FormData();
formData.append('userProfile',blob);
var xhr = new XMLHttpRequest();
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将参数解析成传统form的方式上传
xhr.open('post', '/upload.php',true);
  xhr.onload = fn();//上传成功事件监听
  xhr.onerror = fn(); //上传失败事件监听
xhr.send(formData);
}

一种更简便的H5上传方式

var change = function(){
var file = event.target.files[0];
var fileReader = new FileReader(); fileReader.onload = function(){
var result = this.result;
var blob = new Blob([result],{type:file.type});
var formData = new FormData();
formData.append('userAvatar',blob,file.name);
       //添加其他表单字段
formData.append('username',document.getElementById("uname").value)
formData.append('pwd',document.getElementById("upwd").value);
$.ajax({
type:"post",
url:"http://localhost:3000/uploads",
async:true,
processData:false,
contentType:false,
data:formData,
timeout:6000,
success:function (data) {
console.log('upload success')
},
error:function (xhr,text) {
if(text === 'timeout'){
xhr.abort();
}
}
});
} fileReader.readAsArrayBuffer(file);
}
05-11 13:04