html+js實現多文件上傳、預覽

當我們需要上傳圖片時，一般是通過文件上傳的方式上傳圖片到服務器，但有時候我們需要在上傳之前預覽圖片，以便查看是否選擇了正確的圖片或者調整裁剪等。這時我們就需要用到前端技術來實現圖片預覽功能。
下面將介紹如何使用 HTML、CSS 和 JavaScript 實現文件上傳和圖片預覽的功能，具體實現如下。

文件上傳表單和預覽區

首先，我們需要一個文件上傳表單和一個預覽區域。文件上傳表單可以使用標準的 HTML <form>標籤實現，如下所示：

<form action="#" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload" multiple>
    <input type="submit" value="上傳文件">
</form>

這個表單包含一個文件選擇框和一個提交按鈕，用戶可以通過文件選擇框選擇要上傳的文件並點擊提交按鈕上傳。
爲了實現預覽功能，我們還需要一個預覽區域，用於在上傳文件之前顯示選擇的圖像文件。預覽區域可以使用一個空的 <div>元素實現，如下所示：

<!-- 圖像預覽區域 -->
<div id="imagePreviews"></div>

在這個示例中，我們將預覽區域的 ID 設置爲imagePreview。

CSS樣式

爲預覽區域定義一些基本的 CSS 樣式，並確保它的大小和文件上傳框的大小相同，如下所示

#imagePreview {
    width: 200px;
    height: 200px;
    margin-top: 20px;
    background-color: #eee;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

這個 CSS 樣式定義了預覽區域的寬度、高度、邊距、背景顏色和背景圖像屬性，使其以一種較爲合理的方式呈現預覽圖片。在這個示例中，我們將預覽區域的大小設置爲 200 x 200 像素，並將背景顏色設置爲淺灰色

JavaScript 實現文件上傳和預覽

現在，我們需要一些 JavaScript 代碼來實現文件上傳和圖像預覽的功能

// 獲取文件上傳表單中的 input 元素
var fileInput = document.getElementById('fileToUpload');
// 監聽 input 元素的 onchange 事件
fileInput.addEventListener('change', function(event) {
// 獲取上傳的文件
var file = event.target.files[0];
// 如果上傳的文件是圖像文件，則進行預覽
if (file.type.match('image.*')) {
    var reader = new FileReader();
    // 將圖像文件轉換爲 Data URL
    reader.readAsDataURL(file);
    // 當讀取完成時，顯示預覽圖像
    reader.onload = function() {
    var imagePreview = document.getElementById('imagePreview');
    imagePreview.style.backgroundImage = 'url(' + reader.result + ')';
    }
}
});

這個示例代碼使用了JavaScript監聽文件上傳表單中的input元素的onChange事件。在事件回調函數中，我們判斷上傳的文件是否爲圖像文件，如果是，則創建一個新的 FileReader 對象，並調用它的readAsDataURL方法將文件轉換爲 Data URL。最後，我們使用 Image 的 CSS 屬性將 Data URL 應用到預覽區域的背景圖片上，以顯示圖像預覽。

實現多文件上傳和預覽

如果需要同時上傳多個文件並預覽它們，可以使用multiple屬性將輸入框設置爲多選模式，並稍加修改 JavaScript 代碼來處理多個文件。
以下是針對多文件上傳和預覽的JavaScript和CSS代碼：

// 獲取文件上傳表單中的 input 元素
var fileInput = document.getElementById('fileToUpload');
// 監聽 input 元素的 onchange 事件
fileInput.addEventListener('change', function(event) {
  // 獲取上傳的文件
  var files = event.target.files;
  // 如果上傳的文件是圖像文件，則進行預覽
  for (var i = 0; i < files.length; i++) {
    if (files[i].type.match('image.*')) {
      var reader = new FileReader();
      // 使用閉包保存每個 reader 對象的狀態
      (function(reader) {
        // 將圖像文件轉換爲 Data URL
        reader.readAsDataURL(files[i]);
        // 當讀取完成時，顯示預覽圖像
        reader.onload = function() {
          var imagePreviews = document.getElementById('imagePreviews');
          // 創建預覽圖像的容器和圖像元素
          var previewContainer = document.createElement('div');
          previewContainer.classList.add('image-preview');
          var previewImage = document.createElement('img');
          previewImage.src = reader.result;
          // 將圖像元素添加到容器中，並將容器添加到預覽區域中
          previewContainer.appendChild(previewImage);
          imagePreviews.appendChild(previewContainer);
        }
      })(reader);
    }
  }
});

.image-preview {
    width: 200px;
    height: 200px;
    margin: 10px;
    background-color: #eee;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

這個修改後的代碼使用了一個for循環來迭代每個上傳的文件。對於每個圖像文件，我們創建一個新的FileReader對象並調用它的readAsDataURL方法將文件轉換爲 Data URL。最後，我們創建一個圖片img元素，將 Data URL 設置爲其源屬性，並將圖片元素包裝在一個<div>元素中添加到預覽區域中。
同時使用了一個閉包來保存每個 reader 對象的狀態。在每個循環中，用一個匿名函數包裝reader對象，以便在讀取完成事件回調函數中訪問正確的數據。這樣每個reader對象的狀態就不會在過程中被覆蓋，每個圖像文件都可以正確地顯示預覽了

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

html+js實現多文件上傳、預覽