10个对web开发人员有用的HTML文件上传技巧( 二 ) _HTML

// FileReader 实例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 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv
7. 显示文件上传进度更好的用户体验是让用户知道文件上传进度，前面我们用过了FileReader以及读取和加载文件的事件。
const reader = new FileReader();FileReader还有一个progress 事件，表示当前上传进度，配合HTML5的progress标签，我们来模拟一下文件的上传进度。
reader.addEventListener('progress', (event) => {  if (event.loaded && event.total) {    // 计算完成百分比    const percent = (event.loaded / event.total) * 100;    // 将值绑定到 `progress`标签    progress.value = percent;  }});

文章插图

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj
8. 怎么上传目录上传?我们可以上传整个目录吗?嗯，这是可能的，但有一些限制。有一个叫做webkitdirectory的非标准属性(目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传) ，它允许我们上传整个目录。