Hướng dẫn upload and show multiple image in html - tải lên và hiển thị nhiều hình ảnh trong html

Cần tìm hiểu làm thế nào để tải lên và xem trước nhiều hình ảnh? Bạn đã đến đúng nơi. Trong hướng dẫn này, tôi sẽ phá vỡ tất cả các bước cần thiết để thực hiện điều này một cách dễ dàng và hiệu quả. Tuy nhiên, trước khi chúng tôi bắt đầu, tôi muốn rõ ràng rằng chúng tôi sẽ chỉ tải lên các hình ảnh ở phía trước. Có nghĩa là chúng tôi đã giành chiến thắng thực sự đang tải những hình ảnh này lên cơ sở dữ liệu hoặc AWS. Nếu bạn muốn trở thành một nhà phát triển Stack đầy đủ, thì đến một lúc nào đó bạn cũng muốn học điều đó nhưng bây giờ bạn sẽ muốn bắt đầu bằng cách học cách tải lên và xem trước hình ảnh. Nhân tiện, tôi sẽ giữ mọi thứ rất đơn giản vì mục đích giữ cho người mới bắt đầu hướng dẫn này thân thiện. Bắt đầu nào.

Trong tệp HTML, chúng tôi sẽ cần:

<label for="files">Select multiple files</label>
  <input id="files" type="file" multiple="multiple" accept="image/jpeg, image/png, image/jpg">
  <output id="result">

Không có gì đặc biệt. Một nhãn, đầu vào và phần tử đầu ra. Lưu ý đầu vào có một thuộc tính của bội số, điều này là cần thiết để tải lên nhiều tệp. Chúng tôi cũng bao gồm một thuộc tính chấp nhận sẽ chỉ cho phép người dùng tải lên hình ảnh loại JPEG, PNG hoặc JPG. Mục đích của phần tử đầu ra là hoạt động như một container sẽ giữ các hình ảnh mà chúng ta sẽ thêm sau đó với JavaScript.

Trong tệp CSS:

#result{
  display: flex;
  gap: 10px;
  padding: 10px 0;
}.thumbnail {
  height: 200px;
}

Hãy để thêm các bộ chọn để kết quả và hình thu nhỏ. Đối với hướng dẫn này, các hình ảnh sẽ hiển thị liên tiếp, vì vậy tôi đã thêm các thuộc tính flexbox vào thùng chứa kết quả. Tất nhiên, đây là tùy chọn, nếu bạn muốn hình ảnh hiển thị khác nhau thì hãy tiếp tục và thêm hoặc xóa các thuộc tính. Bạn có thể tự hỏi lớp thu nhỏ đến từ đâu. Chúng tôi chưa thực sự tạo ra lớp này trong tệp HTML của chúng tôi, chúng tôi sẽ làm rất năng động với JavaScript. Hiện tại, chúng tôi chỉ đơn giản là thiết lập các thuộc tính mà chúng tôi muốn nó có.

Được rồi, chúng tôi đã nhận được phần JavaScript của mã, vì vậy để giúp bạn hiểu điều này tốt hơn, tôi sẽ phá vỡ mọi thứ từng mảnh.

Chúng tôi sẽ bắt đầu điều này bằng cách thêm một sự kiện thay đổi vào trường đầu vào. Điều này sẽ phát hiện bất cứ khi nào người dùng tải lên hình ảnh. Xin lưu ý rằng chúng tôi sẽ tiếp tục thêm mã bên trong sự kiện này khi chúng tôi tiến về phía trước.Please keep in mind that we will continue to add code inside this event as we move forward.

document.querySelector("#files").addEventListener("change", (e) => { });

Được rồi, bây giờ, hãy để kiểm tra xem trình duyệt người dùng có hỗ trợ API tệp hay không, đó là những gì chúng tôi sẽ sử dụng để đọc các tệp mà người dùng tải lên. Một tuyên bố đơn giản nếu khác là đủ để hoàn thành việc này. Lưu ý rằng chúng tôi đã bao gồm một tin nhắn lịch sự trong câu lệnh khác cảnh báo người dùng về trình duyệt của họ không hỗ trợ API tệp.

document.querySelector("#files").addEventListener("change", (e) => { 
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    // CODE TO PREVIEW IMAGE
  } else {
    alert("Your browser does not support File API");
  }
});

Bây giờ chúng tôi đã biết trình duyệt người dùng hỗ trợ API tệp, hãy để lấy hình ảnh mà người dùng đã tải lên và lưu trữ chúng trong một biến có tên là tệp. Chúng tôi cũng cần truy cập vào thùng chứa kết quả mà chúng tôi đã tạo trong tệp HTML ở đây. Mỗi khi người dùng tải lên hình ảnh mới, chúng tôi sẽ xóa các hình ảnh cũ khỏi màn hình bằng cách đặt HTML bên trong của container đầu ra thành một chuỗi trống. Tất nhiên bạn có thể thiết kế điều này khác nhau trong tương lai nhưng hãy để Lôi làm theo cách này ngay bây giờ.

document.querySelector("#files").addEventListener("change", (e) => { 
  if (window.File && window.FileReader && window.FileList && window.Blob) { 
    const files = e.target.files;
    const output = document.querySelector("#result");
    output.innerHTML = "";  }
  else {
    alert("Your browser does not support File API");
  }
});

Bây giờ, hãy để tạo ra một vòng lặp cho vòng lặp thông qua từng hình ảnh được tải lên của người dùng. Nếu bất kỳ tệp nào được tải lên của người dùng không có chứa từ hình ảnh hình ảnh, chúng tôi biết người dùng đã không tải lên loại tệp được phép. Để nắm bắt lỗi này, chúng tôi sẽ sử dụng từ khóa tiếp tục. Từ khóa này sẽ dừng vòng lặp cho các bản nhạc của nó và chuyển sang chỉ mục tiếp theo.

document.querySelector("#files").addEventListener("change", (e) => { 
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    const files = e.target.files;
    const output = document.querySelector("#result");
    output.innerHTML = "";
    for (let i = 0; i < files.length; i++) {
       if (!files[i].type.match("image")) continue;
    }
  } else {
    alert("Your browser does not support File API");
  }
});

Tại thời điểm này, chúng ta cần đọc tệp đã tải lên của người dùng với đối tượng Filereader và thêm một sự kiện thay đổi để chúng ta có thể hiển thị hình ảnh. Để hiển thị hình ảnh, chúng ta cần tạo một yếu tố IMG loại và đặt SRC thành URI dữ liệu chúng ta nhận được từ đối tượng Filereader. Lưu ý rằng chúng tôi cũng đã cho phần tử IMG một loại tên thu nhỏ. Đây là cùng một lớp chúng tôi đã tạo một bộ chọn cho trong tệp CSS!

Dưới đây là phiên bản cuối cùng của sự kiện thay đổi:

document.querySelector("#files").addEventListener("change", (e) => { 
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    const files = e.target.files;
    const output = document.querySelector("#result");
    output.innerHTML = "";
    for (let i = 0; i < files.length; i++) {
       if (!files[i].type.match("image")) continue;
        const picReader = new FileReader();
        picReader.addEventListener("load", function (event) {
          const picFile = event.target;
          const div = document.createElement("div");
          div.innerHTML = `<img class="thumbnail" src="${picFile.result}" title="${picFile.name}"/>`;
          output.appendChild(div);
        });
        picReader.readAsDataURL(files[i]);
       }
  } else {
    alert("Your browser does not support File API");
  }
});

Không có gì!

Có thể làm cho nó hoạt động? Kiểm tra Codepen của tôi và/hoặc một video hướng dẫn sâu hơn dưới đây.

Làm cách nào để hiển thị nhiều hình ảnh trong HTML?