圖片上傳預覽場景基本處處可見，朋友圈發動態配圖，身份驗證及頭像更新，莫過如斯。

原由

最近在研究twitter PC網站的時候，在個人中心的主頁，設定個人的背景圖的時候，發現twitter有個非常好的設計，那就是使用者在更改背景牆圖片的時候，它根本不是先上傳圖片，而是在本地預覽及編輯圖片，待使用者點選儲存後，才上傳圖片，可以說是非常省流量的啦。然後，我在玩知乎的時候貌似它是先上傳，然後預覽的，為啥不學twitter這樣做呢？於是乎，我就研究了下圖片預覽的幾種方式，跟大家一起分享下。

介紹幾個不常見的BOM物件

URL物件

• URL物件是瀏覽器的原生物件，可以用來構造、解析及編碼URL。一般情況下，通過window.URL可以拿到這個物件。 <a>

  元素及<area>元素都部署了這個介面。也就是說，它們的 DOM 節點物件可以使用 URL 的例項屬性和方法。

  var a = document.createElement('a');
  a.href = 'https://www.baidu.com?search=bat';
  
  console.log(a.hostname); // www.baidu.com
  console.log(a.search); // ?search=bat

  上面程式碼中，a是<a>元素的 DOM 節點物件。可以在這個物件上使用 URL 的例項屬性，比如hostname和search。

• URL是一個建構函式，可以生成URL例項。它接受一個表示 URL 的字串作為引數。如果引數不是合法的 URL，會報錯。

  var url = new URL('http://www.example.com/index.html');
  url.href
  // "http://www.example.com/index.html"

  如果引數是另一個 URL 例項，建構函式會自動讀取該例項的href屬性，作為實際引數。
  如果 URL 字串是一個相對路徑，那麼需要表示絕對路徑的第二個引數，作為計算基準。

• 例項屬性

  URL 例項的屬性與Location物件的屬性基本一致，返回當前 URL 的資訊。
  • URL.href：返回整個 URL
  • URL.protocol：返回協議，以冒號:結尾
  • URL.hostname：返回域名
  • URL.host：返回域名與埠，包含:號，預設的80和443埠會省略
  • URL.port：返回埠
  • URL.origin：返回協議、域名和埠
  • URL.pathname：返回路徑，以斜槓/開頭
  • URL.search：返回查詢字串，以問號?開頭
  • URL.searchParams：返回一個URLSearchParams例項，該屬性是Location物件沒有的
  • URL.hash：返回片段識別符，以井號#開頭
  • URL.password：返回域名前面的密碼
  • URL.username：返回域名前面的使用者名稱
• 靜態方法
  • URL.createObjectURL()
    URL.createObjectURL方法用來為上傳/下載的檔案、流媒體檔案生成一個URL字串。這個字串代表了File物件或Blob物件的URL。
    URL.createObjectURL方法用來為上傳的檔案生成一個 URL 字串，作為元素的圖片來源。注意，每次使用URL.createObjectURL方法，都會在記憶體裡面生成一個 URL 例項。如果不再需要該方法生成的 URL 字串，為了節省記憶體，可以使用URL.revokeObjectURL()方法釋放這個例項。
  • URL.revokeObjectURL()
    URL.revokeObjectURL方法用來釋放URL.createObjectURL方法生成的 URL 例項。它的引數就是URL.createObjectURL方法返回的 URL 字串。

那麼，大家關心的一個問題就是它的相容性問題了，可以說移動端基本上是沒啥問題的啦。除了個別的（IE，你瞅我幹啥）；

FileReader物件

FileReader物件呢，在此不再贅述，因為一談到圖片上傳，那必須要用到的。具體可以參看MDN的API文件了FileReader。
這個物件的相容性，基本上也不用怎麼考慮。除非個別的如IE6-9等等。

例項演示圖片預覽的幾種方法

經過上述對兩個物件的瞭解，那麼大家可能知道，我們預覽可能會跟這兩個物件有關，毋庸置疑，那是必須要的。

<!--html-->
<img id="preview" src="" />
<input type="file" id="select" accept="iamge/png,iamge/jpeg,image/jpg" />

var preview = document.getElementById('preview'),
    select = document.getElementById('select');

select.addEventListener('change', function fileInput (e) {
    if (!this.files.length) return
    var file = this.files[0];
    previewImage(preview, file);
}, false);

• 第一種，也就是twttier使用的方式：

function previewImage (target, file) {
    try {
        var src = window.URL.createObjectURL(file);
        target.onload = function () {
            window.URL.revokeObjectURL(this.src);
        };
        target.src = src;
    } catch (e) {
        throw new Error('browser doest not support URL')
    }
}

• 第二種，使用FileReader物件readAsDataURL方法：

function previewImage (target, file) {
    try {
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            target.src = e.target.result
        };
        fileReader.readAsDataURL(file);
    } catch (e) {
        throw new Error('browser doest not support FileReader')
    }
};

• 第三種，針對IE的，經瞭解，在IE7-11下，檔案上傳地址為本地的絕對路徑地址，因此可一直直接將圖片路徑直接設定為input的值

select.addEventListener('change', function fileInput (e) {
    if (!this.files.length) return
    // 具體要在IE瀏覽器驗證下
    preivew.src = this.value;
}, false);

最後，如果你如果覺得我的文章不錯的話，麻煩關注下我的個人公眾號【前端匯聚】。

相關推薦