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

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

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

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

基本機(jī)構(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

接下來(lái)，介紹一下組件需要用到的幾個(gè)API：

• FileList

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

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

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

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

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