本文實例講述了jQuery實現(xiàn)移動端圖片上傳預(yù)覽組件的方法。分享給大家供大家參考，具體如下：

之前的一篇博客：移動端H5圖片預(yù)覽和壓縮，實現(xiàn)了基本的功能。這次則計劃做成一個組件，可供前臺、后臺使用。

首先，我們先來捋一捋想要實現(xiàn)的功能：

• 預(yù)覽
• 刪除
• 壓縮
• 上傳到服務(wù)器

基本機構(gòu)

這樣，我們的組件結(jié)構(gòu)就有了：

;!function(window, $, undefined){
  function Upload() { };

  Upload.prototype.change = function() { };

  Upload.prototype.del = function() { };

  Upload.prototype.compress = function() { };

  Upload.prototype.submit = function() { };

}(window, jQuery)

主要API

接下來，介紹一下組件需要用到的幾個API：

• FileList

````
// 獲取上傳文件的 FileList
document.getElementById('inputId').files
````

• window.URL.createObjectURL(file)：返回一個關(guān)于圖片地址url的blob格式
• createImageBitmap(file)：返回一個imageBitmap對象，它包含著文件的相關(guān)信息
• canvas.drawImage(imageBitmap)：將圖片畫在canvas畫布上，對圖片大小進行縮放
• canvas.toBlob()：轉(zhuǎn)化為blob對象，可以對圖片質(zhì)量進行更改
• FormData：將上傳圖片保存在FormData的實例上，上傳到服務(wù)器

DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。