Hiển thị xem trước hình ảnh trước khi tải lên

Trong mẫu HTML của tôi, tôi đã nhập dữ liệu với tệp loại ví dụ:

 <input type="file" multiple>

Sau đó, tôi đang chọn nhiều tệp bằng cách nhấp vào nút nhập đó. Bây giờ tôi muốn hiển thị xem trước các hình ảnh được chọn trước khi gửi biểu mẫu. Làm thế nào để làm điều đó trong HTML 5?

HTML5 đi kèm với thông số API tệp , cho phép bạn tạo các ứng dụng cho phép người dùng tương tác với các tệp cục bộ; Điều đó có nghĩa là bạn có thể tải tệp và hiển thị chúng trong trình duyệt mà không cần phải tải tệp lên. Một phần của API tệp là giao diện FileReader cho phép các ứng dụng web đọc không đồng bộ nội dung của tệp.

Dưới đây là một ví dụ nhanh sử dụng FileReaderlớp để đọc hình ảnh dưới dạng DataURL và hiển thị hình thu nhỏ bằng cách đặt srcthuộc tính của thẻ hình ảnh thành URL dữ liệu:

Mã html:

<input type="file" id="files" />
<img id="image" />

Mã JavaScript:

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Đây là một bài viết hay về cách sử dụng API tệp trong JavaScript .

Đoạn mã trong ví dụ HTML bên dưới lọc ra các hình ảnh từ lựa chọn của người dùng và kết xuất các tệp đã chọn thành nhiều bản xem trước hình thu nhỏ:

function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 75px; border: 1px solid #000; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

<input type="file" id="files" multiple />
<output id="list"></output>

Ở đây tôi đã làm với jQuery bằng API FileReader.

Đánh dấu Html:

<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>

jQuery:

Ở đây trong mã jQuery, đầu tiên tôi kiểm tra phần mở rộng tệp. tức là tệp hình ảnh hợp lệ sẽ được xử lý, sau đó sẽ kiểm tra xem trình duyệt hỗ trợ API FileReader có hay không, chỉ xử lý khác hiển thị thông báo được tôn trọng

$("#fileUpload").on('change', function () {

     //Get count of selected files
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });

Bài viết chi tiết: Cách xem trước hình ảnh trước khi tải lên, jQuery, HTML5 FileReader () với Live Demo

Đối với hình nền, đảm bảo sử dụng url()

node.backgroundImage = 'url(' + e.target.result + ')';