大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

h5实现文件上传杂谈

使用h5进行文件上传,可以通过获取file文件对象或拼装blob对象,添加到h5新增对象FormData,通过ajax进行文件上传文件服务器,现在我们就通过单文件作为实例:

1,简单的file对象文件上传

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'/>

<title>用fromData进行文件上传</title>

</head>

<body>


</body>

<script>

var readFile = document.getElementById('readFile');

readFile.onchange = function() {

if(!window.FormData) {

console.log('本浏览器不支持文件上传');

};

sentFileData(this.files[0]);

};

function sentFileData(file) {

var xhr = new XMLHttpRequest();

var fd = new FormData();

fd.append('part', file);

xhr.onload = function() {

if(xhr.readyState === 4 && xhr.status === 200) {

console.log(JSON.parse(xhr.responseText))

}

};

xhr.open('post', url);

xhr.send(fd);

}

</script>

</html>

2.文件数据流上传文件

var canvas = document.getElementsById('canvasText');

//生成本地base64位链接, toDataURL参数输入图片的mimeType

var imageUrl = canvas. toDataURL(' image/png ');

//将base64转化成二进制

var byteString = atob( imageUrl.split(',')[0]);

//生成类型数组视图

var uintArray = new Uint8Array(byteString.length);

for(var i = 0; i < byteString; i++) {

uintArray[i] = byteString .charCodeAt(i);

};

var blob = new Blob([uintArray], {type: 'image/png'});

var xhr = new XMLHttpRequest();

var fd = new FormData();

fd.append('part', blob);

xhr.onload = function() {

if(xhr.readyState === 4 && xhr.status === 200) {

console.log(JSON.parse(xhr.responseText))

}

};

xhr.open('post', url);

xhr.send(fd);