溫馨提示×

溫馨提示×

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

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

JavaScript中怎么實現(xiàn)異步圖像上傳

發(fā)布時間：2021-07-01 16:56:25 來源：億速云 閱讀：161 作者：Leah 欄目：web開發(fā)

JavaScript中怎么實現(xiàn)異步圖像上傳，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

使用的代碼

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

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

JavaScript中怎么實現(xiàn)異步圖像上傳

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

步驟2:生成Base64縮略圖

JavaScript中怎么實現(xiàn)異步圖像上傳

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

步驟3:使用Ajax上傳文件

JavaScript中怎么實現(xiàn)異步圖像上傳  

JavaScript中怎么實現(xiàn)異步圖像上傳  

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

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

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

<!DOCTYPE html>  <html>  <body>  <input type="file" id="imageFileInput" accept=".jpg, .jpeg, .png" />  <img src="//:0" id="preview" />  <script>  document.getElementById('imageFileInput').addEventListener('change', function() {  var img = this.files[0];  uploadImage(img, '/image/upload', function(url) {  // Image upload to server response  // Show the image using setImageUrl(URL)  });  getBase64ImageUrl(img, function(base64ImageUrl) {  var height = 100,  width = 100;  getThumbnail(base64ImageUrl, height, width, function(base64ThumbnailUrl) {  setImageUrl(base64ThumbnailUrl);  })  });  }, false);  function setImageUrl(url) {  document.getElementById('preview').setAttribute('src', url);  };  function uploadImage(img, url, callback) {  var xhr = new XMLHttpRequest();  var fd = new FormData();  xhr.open("POST", url, true);  xhr.onreadystatechange = function() {  if (xhr.readyState == 4 && xhr.status == 200) {  callback && callback(xhr.responseText);  }  };  fd.append("upload_image", img);  xhr.send(fd);  };  function getBase64ImageUrl(img, callback) {  var reader = new FileReader();  reader.readAsDataURL(img);  reader.onload = function() {  callback && callback(reader.result);  };  reader.onerror = function(error) {  console.log('Error: ', error);  };  };  function getThumbnail(base64ImageUrl, height, width, callback) {  var canvas = document.createElement('canvas');  var ctx = canvas.getContext("2d");  var image = new Image();  image.src = base64ImageUrl;  image.onload = function() {  ctx.drawImage(image, 0, 0, width, height); callback && callback(canvas.toDataURL());  };  }  </script>  </body>  </html>

關(guān)于JavaScript中怎么實現(xiàn)異步圖像上傳問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細(xì)節(jié)

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

AI
助
手