10个对web开发人员有用的HTML文件上传技巧，字节跳动前端实习面试凉凉经

const reader = new FileReader();

fileUploader.addEventListener(‘change’, (event) => {

const files = event.target.files;

const file = files[0];

reader.readAsDataURL(file);

reader.addEventListener(‘load’, (event) => {

const img = document.createElement(‘img’);

imageGrid.appendChild(img);

img.src = event.target.result;

img.alt = file.name;

});

});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ

6.验证文件大小

---

如果用户上传图片过大，为了不让服务器有压力，我们需要限制图片的大小，下面是允许用户上传小于 1M 的图片，如果大于 1M 将上传失败。

fileUploader.addEventListener(‘change’, (event) => {

// Read the file size

const file = event.target.files[0];

const size = file.size;

let msg = ‘’;

// 检查文件大小是否大于1MB

if (size > 1024 * 1024) {

msg = <span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>;

} else {

msg = <span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>;

}

feedback.innerHTML = msg;

});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：