图片文件上传相关的前端知识

用传统的DOM选择器获取选中文件：

var selectedFile = document.getElementById('input').files[0];

你如果允许用户选择多个文件，只用在input元素上加multiple属性：

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

在这种情况下，传入handleFiles()函数文件列表包含一个用户选中文件的File对象。

使用click()方法来使用隐藏的file元素

假设有如下的HTML

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" 
onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>

处理click事件的代码像这样：

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

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

这样你就可以按照心中的想法对按钮的样式进行改造来作为元素的选择器。

展示用户选中图片的缩略图示例

假设你正在开发下一款伟大的照片分享网站，并且在用户真正上传他们之前用HTML5展示这些缩略图。你可以用上面所述的方法将input元素按照自己想要的方法进行美化，并且用一个handleFiles()方法来处理图片上传。

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); // Assuming that "preview" is the div output where the content will be displayed.
    
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

这里我们循环处理用户选择的文件，查看每个文件的type属性并检查改文件是否是个图片文件（通过用正则表达式来匹配MIME类型模型"image/*"）。对于每一个图片文件，我们创建了一个新的img元素。其实可以用CSS来对这些图片进行些美化，例如边框、阴影、指定大小等，但在这里没必要写。

每个图片元素都加之有CSS样式obj，以便于在DOM树种进行查找。我们也为每个图片元素指定了file属性为此File，这样可以让我们在之后真正上传时抓取到这些图片。我们用DOM节点的appendChild()方法来将新的缩略图增添到文档的预览区。

下一步，我们建立FileReader来处理异步加载图片并将之加之于img元素。在创建一个新的FileReader对象后，我们设立它的onload方法并且调用readAsDataURL()来开始在后台读的操作。当图片文件中的整个内容都被加载，它们都被转化成了一个data: URL，用来传入到onload回调方法中。我们设置图片元素的src属性来加载图片以完成这个示例，这样图片就以缩略图的方法展示在用户的屏幕上。

参考 MDN