通过input自身的type=file实现,需要注意的是input对于一个文件只能选择一次,所以如果要多次选中需要对input做处理
//html
<input id="file" oninput="handleFileChange(this)" type="file" name="file" multiple="multiple"></input>
// js
handleFileChange = (e) => {
const files = e.files;
let uploadList = []
if (files[0].size > 1024 * 1024 * 3) {
return false; // 单张图片不得超过3M
}
for (let i = 0; i < files.length; i++) {
if (window.FileReader) {
// 创建文件可读流
let reader = new FileReader()
reader.onload = e => {
// let myimage = document.getElementById('img')
// 加载图片流展示到页面当中
createImg(e.target.result)
// 文件流base64格式
uploadList.push(e.target.result)
}
reader.readAsDataURL(files[i])
}
}
}
function createImg(imgSrc) {
var theImg = document.createElement("img");
theImg.src = imgSrc;
document.body.appendChild(theImg);
theImg.className = "imgC";
}
网友评论