JS异步上传文件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

直接调用Upload(option)方法，即可上传文件，不需要额外的插件辅助，采用原生js编写。

/*
*异步上传文件
*option参数
**url：上传路径
**data:上传的其他数据{id："1"}
**maxSize：文件最大值(单位M)
* img:"#qrimg",
**callback：回调函数（可空）
**beforeSend:上传前函数（可空）
*/
function Upload(option) {
var fd = new FormData(),
xhr = new XMLHttpRequest(),
input;
if (document.getElementById('_RobinUploadInput')) {
input = document.getElementById('_RobinUploadInput');
} else {
input = document.createElement('input');
input.setAttribute('id', '_RobinUploadInput');
input.setAttribute('type', 'file');
input.setAttribute('name', 'file');
document.body.appendChild(input);
input.style.display = 'none';
}
input.click();
input.onchange = function () {
if (!input.value) { return; }
if (option.maxSize && input.files[].size > option.maxSize * * ) {
alert("请上传小于' + option.maxSize + 'M的文件");
return;
}
if (option.beforeSend instanceof Function) {
if (option.beforeSend(input) === false) {
return false;
}
}
if (option.data) {
for (var name in option.data) {
fd.append(name, option.data[name]);
}
}
if (option.img) {
var $img = $(option.img);
var windowURL = window.URL || window.webkitURL;
dataURL = windowURL.createObjectURL(input.files[]);
$img.attr('src', dataURL);
}
fd.append('Filedata', input.files[]);
xhr.open('post', option.url);
xhr.onreadystatechange = function () {
if (xhr.status == ) {
if (xhr.readyState == ) {
if (option.callback instanceof Function) {
option.callback(xhr.responseText);
}
}
} else {
alert("上传失败");
}
}
xhr.upload.onprogress = function (event) {
var pre = Math.floor( * event.loaded / event.total);
if (option.uploading instanceof Function) {
option.uploading(pre);
}
}
xhr.send(fd);
}
}