用H5上传文件
2021-05-23 02:29
标签:pos let func filetype return read span bytes byte 用H5上传文件 标签:pos let func filetype return read span bytes byte 原文地址:http://www.cnblogs.com/toward-the-sun/p/7687916.html//1,第一步读取用户选中的文件
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 ) {
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);
}