溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery如何實現(xiàn)移動端圖片上傳預(yù)覽

發(fā)布時間：2020-07-29 10:22:24 來源：億速云 閱讀：280 作者：小豬 欄目：web開發(fā)

小編這次要給大家分享的是jQuery如何實現(xiàn)移動端圖片上傳預(yù)覽，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

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

基本機構(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ù)器

看完這篇關(guān)于jQuery如何實現(xiàn)移動端圖片上傳預(yù)覽的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手