這篇文章將為大家詳細(xì)講解有關(guān)JavaScript實(shí)現(xiàn)異步圖像上傳功能的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為阿城企業(yè)提供專(zhuān)業(yè)的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)，阿城網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

當(dāng)向服務(wù)器上傳圖像時(shí)，根據(jù)服務(wù)器操作的復(fù)雜性和服務(wù)器性能，需要幾秒鐘到幾分鐘的時(shí)間來(lái)完成。本文的重點(diǎn)是在圖像上傳至服務(wù)器時(shí)使用JavaScript立即顯示圖像。

介紹

當(dāng)使用JavaScript將圖像上傳到服務(wù)器時(shí)，根據(jù)服務(wù)器操作的復(fù)雜性，可能需要幾秒到幾分鐘來(lái)完成操作。在某些情況下，即使圖像上傳成功，也需要花費(fèi)更多的時(shí)間，這取決于服務(wù)器對(duì)圖像進(jìn)行額外處理的能力。

本文展示了一種使用代碼示例立即顯示圖像的方法(使用圖像的Base64編碼版本)，同時(shí)將其上載到服務(wù)器，而無(wú)需等待操作完成。這種方法的目的是提高web應(yīng)用程序的用戶(hù)體驗(yàn),而不等待服務(wù)器做整個(gè)圖像的處理(例如,縮略圖生成、應(yīng)用過(guò)濾器等)后,上傳成功,因?yàn)樗梢栽诳蛻?hù)端web應(yīng)用程序上展示圖片。

背景

在使用AWS S3作為圖像存儲(chǔ)時(shí)，最初遇到了這個(gè)問(wèn)題。圖像縮略圖的設(shè)置是使用AWS Lambda完成的，在使用web應(yīng)用程序的JavaScript成功上傳圖像到S3之后，S3將異步觸發(fā)AWS Lambda函數(shù)，該函數(shù)將生成圖像的縮略圖并將其存儲(chǔ)在另一個(gè)S3中。盡管這是一個(gè)高度可伸縮和可靠的圖像縮略圖生成解決方案，但是web應(yīng)用程序要等到生成縮略圖才能在應(yīng)用程序的視圖中顯示它，這是不現(xiàn)實(shí)的。

使用的代碼

此代碼使用VanillaJS編寫(xiě)，不使用任何第三方JavaScript庫(kù)，因此如果您使用任何第三方框架，您可以使用框架或庫(kù)提供的構(gòu)造來(lái)調(diào)整概念并實(shí)現(xiàn)它。

步驟1:將圖像加載到瀏覽器

如圖所示在上面的例子中,有兩個(gè)HTML元素的例子。< img > DOM元素有顯示選中的圖像。 DOM元素為用戶(hù)選擇圖像文件。使用JavaScript文件API,可以聽(tīng)改變事件處理程序和加載圖像訪問(wèn)使用JavaScript。

步驟2:生成Base64縮略圖

使用JavaScript訪問(wèn)圖像后，將其加載到HTML5 FileReader并轉(zhuǎn)換為Base64數(shù)據(jù)URL。然后使用Base64數(shù)據(jù)URL更新 DOM元素。

步驟3:使用Ajax上傳文件

使用Ajax，圖像上傳被啟動(dòng)到服務(wù)器。使用JavaScript, HTML表單提交將異步觸發(fā)，具體的代碼將根據(jù)服務(wù)器實(shí)現(xiàn)而異，特別是在HTTP方法(例如，這里是POST)和URL方面。

如果服務(wù)器響應(yīng)包含圖像URL，則可以使用它相應(yīng)地更新 DOM元素，或者如果服務(wù)器維護(hù)了適當(dāng)?shù)膱D像訪問(wèn)路徑約定(例如，/images/)，則可以使用它加載圖像。

步驟4:(可選)客戶(hù)端縮略圖生成

關(guān)于“JavaScript實(shí)現(xiàn)異步圖像上傳功能的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。