<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- multiple属性规定文件上传可以多选 -->
<input type="file" name="file" id="file" multiple>
<pre>
将上传的文件进行base64转码,并转换为JSON数据格式
(注意异步的问题)
</pre>
<script>
$("#file").change(function(){
// 存放文件的数组,用于将对象中的每一个文件存储并过滤无用属性
var arr = [];
//开始过滤
for(let i = 0;i<$(this)[0].files.length;i++){
arr.push($(this)[0].files[i]);
}
//回调写法
var arr2 = [];
arr.forEach((val,index)=>{
let reader = new FileReader();
reader.readAsDataURL(val);
reader.onload = function(e){
arr2.push(e.target.result);
//当arr数组的元素个数与arr2数组的元素个数相等时证明已经全部转换完成
if(arr2.length == arr.length){
console.log(JSON.stringify({files:arr2}));
}else{
console.log("不行");
}
}
})
//由于会产生异步所以使用promise来限制回调
var p = new Promise(function(resolve,reject){
var arr2 = [];
arr.forEach((val,index)=>{
let reader = new FileReader();
reader.readAsDataURL(val);
reader.onload = function(e){
arr2.push(e.target.result);
//当arr数组的元素个数与arr2数组的元素个数相等时证明已经全部转换完成
if(arr2.length == arr.length){
resolve(arr2);
}
}
})
})
//base64转换完成时执行,将整个res(arr2)转换为JSON字符串
p.then(function(res){
console.log(JSON.stringify({files:res}));
},function(error){
})
})
</script>
</body>
</html>
将上传的文件进行base64转码,并转换为JSON数据格式
最新推荐文章于 2023-05-16 10:40:31 发布