HTML5 DOM File API

訪問選中的文件

簡單的html代碼：

<input type="file" id="input">

經過File API,咱們能夠在用戶選取一個或者多個文件以後（若是你的程序能夠讓用戶選擇多個文件,記得要在input元素上加上multiple屬性）,訪問到表明了所選文件的一個或多個File對象,這些對象被包含在一個FileList對象中.
若是用戶只選擇了一個文件,那麼咱們只須要訪問這個FileList對象中的第一個元素.
能夠使用傳統的DOM選擇方法來獲取到用戶所選擇的文件:

var selected_file = document.getElementById("input").files[0];

也能夠使用jquery選擇器來選擇：

var selected_file = $("#input").get(0).files[0];

獲取所選文件的信息

用戶所選擇的文件都存儲在了一個FileList對象上,其中每一個文件都對應了一個File對象.你能夠經過這個FileList對象的length屬性知道用戶一共選擇了多少個文件:

var numFiles = files.length;

能夠經過一個for循環語句來操做每一個單獨的File對象:

for (var i = 0, numFiles = files.length; i < numFiles; i++) {
  var file = files[i];
  ..
}

File對象上有三個屬性提供了所包含文件的相關信息.
。name
文件名,只讀字符串,不包含任何路徑信息.
。size
文件大小,單位爲字節,只讀的64位整數.
。type
MIME類型,只讀字符串,若是類型未知,則返回空字符串.

在change事件發生時讀取所選擇的文件

<input type="file" id="input" multiple  accept="image/*" onchange="handleFiles(this.files)">
// accept="image/*"規定在文件上傳中服務器只接受圖像文件

動態添加change事件監聽器

var inputElement = document.getElementById("inputField");
    inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  var fileList = this.files,nBytes = 0; 
   for (var i = 0, numFiles = files.length; i < numFiles; i++) {
          var file = files[i];
          nBytes += file [i].size;
        }
}

改變上傳按鈕樣式

主流瀏覽器中，只須要使用樣式display:none或者opacity:0把本來的文件輸入框隱藏掉,而後在須要的時候調用它的click()方法就好了.
爲自定義的按鈕綁定click事件:

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();//觸發隱藏的input file
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

經過拖放操做選擇文件

重要的三個事件：dragenter, dragover,和drop；

//建立一個拖放操做的目的區域:
var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false); 
//阻止dragenter和dragover事件的默認行爲,這樣才能觸發drop事件   
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}   
//drop
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;
 //從事件對象中獲取到dataTransfer對象,把該對象包含的Filelist對象傳入函數handleFiles,這個函數會無區別的對待從input元素或拖放操做中來的文件列表.
  handleFiles(files);
}
//handleFiles函數
function handleFiles(files) {
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;

        if (!file.type.match(imageType)) {//是不是一個圖像文件
          continue;
        }

        var img = document.createElement("img");
        img.classList.add("obj");//每張圖片添加一個obj類，方便在DOM樹找到
        img.file = file;//添加了一個file屬性來確認每張圖片的 File，這樣能夠幫助咱們在以後真正的上傳工做時獲取到圖片
        preview.appendChild(img);//把縮略圖添加到預覽區域
        //處理圖片的異步加載
        var reader = new FileReader();//建立新的FileReader對象
        reader.onload = (function(aImg) { 
            return function(e) { 
            aImg.src = e.target.result; }; 
        })(img);
        reader.readAsDataURL(file);
      }
}

使用對象URL來顯示圖片

兩個DOM方法：window.URL.createObjectURL()和 window.URL.revokeObjectURL()

window.URL = window.URL || window.webkitURL;
function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    var list = document.createElement("ul");
    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function(e) {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);

      var info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
    fileList.appendChild(list);
  }
}

上傳用戶選擇的文件

function sendFiles() {
  var imgs = document.querySelectorAll(".obj");

  for (var i = 0; i < imgs.length; i++) {
      //一個IMG元素,一個File對象或Blob對象.
    new FileUpload(imgs[i], imgs[i].file);
  }
}    
function FileUpload(img, file) {
  var reader = new FileReader();  
  this.ctrl = createThrobber(img);
  var xhr = new XMLHttpRequest();
  this.xhr = xhr;

  var self = this;
  this.xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
          var percentage = Math.round((e.loaded * 100) / e.total);
          self.ctrl.update(percentage);
        }
      }, false);

  xhr.upload.addEventListener("load", function(e){
          self.ctrl.update(100);
          var canvas = self.ctrl.ctx.canvas;
          canvas.parentNode.removeChild(canvas);
      }, false);
  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
  reader.onload = function(evt) {
    xhr.sendAsBinary(evt.target.result);
  };
  reader.readAsBinaryString(file);
}

異步實現文件上傳

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

---

參考：
https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applicat...