HTML5上傳圖片文件（含拖拽、預覽、上傳、美化）

歡迎交換友鏈 Laker's Blog--進擊的程序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

---

上篇文章講了如何上傳文件。本文講細分講述圖片上傳、預覽等。

關於接口

File API

• File - 獨立文件；提供只讀信息，例如名稱、文件大小、mimetype 和對文件句柄的引用。

• FileList - File 對象的類數組序列（考慮多文件上傳或者從桌面拖動目錄或文件）。

• Blob - 可將文件分割爲字節範圍。

• FileReader - 讀取File或Blob

• URL scheme

檢測瀏覽器是否支持

// 檢測是否支持File API
if (window.File && window.FileReader && window.FileList && window.Blob) {
  //  支持
} else {
  alert('不支持');
}

基本代碼

選取一張圖片，並預覽：
Demo1

<input id="img_input" type="file" accept="image/*"/>
<label for="img_input"></label>
<div class="preview_box"></div>

.preview_box img {
  width: 200px;
}

$("#img_input").on("change", function(e){

  var file = e.target.files[0]; //獲取圖片資源

  // 只選擇圖片文件
  if (!file.type.match('image.*')) {
    return false;
  }

  var reader = new FileReader();

  reader.readAsDataURL(file); // 讀取文件

  // 渲染文件
  reader.onload = function(arg) {

    var img = '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';
    $(".preview_box").empty().append(img);
  }
});

上傳到服務器

var form_data = new FormData();
var file_data = $("#img_input").prop("files")[0];

// 把上傳的數據放入form_data
form_data.append("user", "Mike");
form_data.append("img", file_data);

$.ajax({
    type: "POST", // 上傳文件要用POST
    url: "",
    dataType : "json",
    crossDomain: true, // 若是用到跨域，須要後臺開啓CORS
  processData: false,  // 注意：不要 process data
  contentType: false,  // 注意：不設置 contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});

拖拽上傳

三個相關事件：

• dragenter

• dragover

• drop

原生JavaScript：

Demo2

<div id="drop_zone">Drop files here</div>
<ul id="list"></ul>


// 必須阻止dragenter和dragover事件的默認行爲，這樣才能觸發 drop 事件
function fileSelect(evt) {

  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.dataTransfer.files; // 文件對象
  var output = [];

  // 處理多文件
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate.toLocaleDateString(), '</li>');
  }
  // 顯示文件信息
  document.getElementById('list').innerHTML = output.join('');
}

function dragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy';
}

// 監聽器
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', dragOver, false);
dropZone.addEventListener('drop', fileSelect, false);

jQuery：

其餘代碼能夠不變，注意監聽事件的時候的，因爲jQuery的封裝，數據存放的字段有變，傳參是e.originalEvent而不是e：

$("#drop_zone").on('dragover', function(e){
  e.stopPropagation();
  e.preventDefault();
  handleDragOver(e.originalEvent);
});

$("#drop_zone").on('drop', function(e){
  e.stopPropagation();
  e.preventDefault();
  handleFileSelect(e.originalEvent);
});

美化上傳框

方法一： 在隱藏的文件輸入框上調用click()方法

隱藏掉默認的的文件輸入框<input>元素，使用自定義的界面來充當打開文件選擇對話框的按鈕。要使用樣式display:none把本來的文件輸入框隱藏掉，而後在須要的時候調用它的click()方法就好了。

<input type="file" id="fileElem" multiple accept="image/*" style="display：none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">選擇文件</a>

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

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();  // jQuery能夠使用 trigger()
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

方法二：用label

隱藏input，把樣式寫到label上，點擊label就是對input進行操做。

Demo3

<input id="img_input2" type="file" accept="image/*"/>
<label for="img_input2" id="img_label2">選擇文件
    <i class="fa fa-plus fa-lg"></i>
</label>
<div id="preview_box2"></div>


#img_input2 {
  display: none;
}
#img_label2 {
  background-color: #f2d547;
  border-radius: 5px;
  display: inline-block;
  padding: 10px;
}
#preview_box2 img {
  width: 200px;
}