Skip to main content

input File文件上传​

file对象

element的files里面获取文件；

file = files[n];

  • name: 文件名
  • size：文件大小
  • type：文件Mime类型

显示文件大小​

function updateSize() {
  let nBytes = 0,
      oFiles = document.getElementById("uploadInput").files,
      nFiles = oFiles.length;
  for (let nFileId = 0; nFileId < nFiles; nFileId++) {
    nBytes += oFiles[nFileId].size;
  }
  let sOutput = nBytes + " bytes";
  // optional code for multiples approximation
  const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
  for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
  }
  // end of optional code
  document.getElementById("fileNum").innerHTML = nFiles;
  document.getElementById("fileSize").innerHTML = sOutput;
}

唤起隐藏的file​

click唤醒

const fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
}, false);

label唤醒

显示用户选择的缩略图​

  • 通过fileRender

[FileReader](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)来处理异步的图片加载并把他赋给img元素。在创建一个新的 FileReader对象后，我们新建了它的onload 函数，然后调用readAsDataURL()函数开始后台读取文件。当整个图片文件的内容都被全部加载完后，它们被转换成了一个被传递到onload回调函数的data:URL。我们再执行常规操作将img元素的src属性设置为刚刚加载完毕的URL，使得图像可以显示在用户屏幕上的缩略图中。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 [File](https://developer.mozilla.org/zh-CN/docs/Web/API/File) 或 [Blob](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob) 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个[<input>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)元素上选择文件后返回的[FileList](https://developer.mozilla.org/zh-CN/docs/Web/API/FileList)对象,也可以来自拖放操作生成的 [DataTransfer](https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer)对象,还可以是来自在一个[HTMLCanvasElement](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement)上执行mozGetAsFile()方法后返回结果。

重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;

    if (!imageType.test(file.type)) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // 假设"preview"就是用来显示内容的div

    var reader = new FileReader();
        // 注意闭包
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}
  • 使用window.URL对象

设置图片的源为一个新的指代文件的对象URL，使用[window.URL.createObjectURL() (en-US)](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL)来创建blob URL。

设置图片的load事件处理器来释放对象URL，当图片加载完成之后对象URL就不再需要了。这个可以通过调用[window.URL.revokeObjectURL() (en-US)](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)方法并且传递 img.src中的对象URL字符串来实现。