js,进行多个文件上传并获取文件base64,
1、html代码
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/new.js"></script>
</head>
<body>
</body>
</html>
2、new.js
$( function () {
let input = "<input id='txtuploadFile' type='file' multiple='multiple' />";
if ($("#txtuploadFile").length === 0) {
$("body").append(input);
$('#txtuploadFile').change(function () {
if ($("#txtuploadFile").val() === '') {
return;
}
var filelist=[];
var files =$('#txtuploadFile')[0].files;
async function getFile() {
for(var i=0;i<files.length;i++){
let res = await getFileBase64(files[i]);
filelist.push(res);
/*
let reader = new FileReader();
reader.readAsDataURL(files[i]);
reader.onload = await function (ev) { //文件读取成功完成时触发
let dataURLOrigin = ev.target.result;
filelist.push(dataURLOrigin);
}
*/
}
console.log(filelist);
//此处可调用后端接口,把文件内容传给后台
//xxxxxxxxxxxxxxxxxxxxxxxx
}
function getFileBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function (ev) {
let dataURLOrigin = ev.target.result;
imgResult = dataURLOrigin;
};
reader.onerror = function (err) {
reject(err);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
}
getFile();
})
}
})