AJAX下載圖片而不是預覽
在Web開發中，我們經常需要下載圖片。通常，網站上的圖片可以通過點擊鏈接或圖片來查看或下載。然而，有時我們可能希望在下載圖片之前不顯示預覽，而是直接將圖片保存到本地。這種需求在一些圖片批量下載的場景中尤為常見。在本篇文章中，我們將介紹如何使用AJAX來下載圖片，而不是預覽圖片。
在開始之前，讓我們看一個示例。假設我們有一個網站上展示著一系列照片的頁面。每張照片都有一個下載按鈕。當用戶點擊下載按鈕時，圖片應該立即下載到本地，而不是預覽。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function downloadImage(imageUrl) {
$.ajax({
url: imageUrl,
method: 'GET',
xhrFields: {
responseType: 'blob'
},
success: function(data) {
var a = document.createElement('a');
var url = window.URL.createObjectURL(data);
a.href = url;
a.download = 'image.png';
a.click();
window.URL.revokeObjectURL(url);
}
});
}
</script>
</head>
<body>
<img src="image1.jpg" height="200" width="200" />
<button onclick="downloadImage('image1.jpg')">下載</button>
<img src="image2.jpg" height="200" width="200" />
<button onclick="downloadImage('image2.jpg')">下載</button>
<img src="image3.jpg" height="200" width="200" />
<button onclick="downloadImage('image3.jpg')">下載</button>
</body>
</html>在上面的示例中，我們使用了jQuery的AJAX方法來發送一個GET請求。我們將responseType設置為'blob'，以便將響應數據解析為Blob（二進制數據）。接下來，我們將Blob數據創建為一個臨時URL，并將其賦值給下載鏈接的href屬性。我們還設置了下載鏈接的download屬性為'image.png'，這是保存到本地的文件名。最后，我們模擬了點擊下載鏈接的操作以開始下載。
通過點擊每個圖片旁邊的"下載"按鈕，我們可以直接將對應圖片下載到本地，而不是在新標簽頁中打開預覽。
這種使用AJAX下載圖片而不是預覽的方法可以應用于各種不同的場景。例如，如果我們有一個圖片庫，用戶可以選擇一組圖片并點擊一個按鈕來下載。此時，我們可以使用類似的AJAX方法來一次下載所有選定的圖片。
總結來說，使用AJAX下載圖片而不是預覽可以提供更加靈活的下載策略。通過使用AJAX，我們可以在不打開新標簽頁的情況下直接將圖片保存到本地，從而提供更好的用戶體驗。
下一篇css不讓i標簽傾斜