[Lập Trình] Thêm, xóa và hiển thị hình ảnh bằng javascript

9/15/2020 1:38 PM | Lập trình

Thêm nhiều file hình ảnh và preview hình ảnh sau khi chọn như nào? Xóa file hình ảnh nếu không ưng ý. Bài viết sau sẽ giải quyết những vấn đề này.

1.Javascript

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
          
          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/
          
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
2.CSS
input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}
3. HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field" align="left">
  <h3>Upload your images</h3>
  <input type="file" id="files" name="files[]" multiple />
</div>

Kết quả:

Nguồn có demo tại đây

Tin tức khác

  • Cách dựng 1 website bằng iis.

    Cách dựng 1 website bằng iis.

    Có rất nhiều bạn làm web nhưng lại không biết cách build 1 site trên iis. Nên hôm nay mình sẽ chia sẻ các bước đơn giản để có thể dễ dàng tạo được 1 trang web bằng iis trên  server windows.

  • Build site PHP trên server windows.

    Build site PHP trên server windows.

    Mình đang quản trị các website asp.net nên việc build một website wordpress lên vps của mình gặp rất nhiều khó khăn. Và mình hỏi còn gặp những ý kiến như không thể build php và asp.net trên cùng một môi trường. Nhưng hôm nay mình đã làm được và chia sẻ lại cho mọi người. Nếu vẫn gặp khó khăn thì inbox cho mình nha. Thông tin nằm ở footer trang web.

  • Upload hình ảnh trong ckeditor asp.net

    Upload hình ảnh trong ckeditor asp.net

    Mình làm dự án và khách hàng yêu cầu thêm chức năng trong ckeditor. Nên cũng đọc, tìm kiếm share lại cho anh em có nhu cầu sử dụng nhé.

  • Microservice là gì? Ưu nhược điểm khi xài Microservice.

    Microservice là gì? Ưu nhược điểm khi xài Microservice.

    Hôm bữa mình có viết 1 bài về tổng quan về abp framwork. Trong framework này cũng có nhắc tới cách sử dụng và demo về microservice. Hôm nay mình sẽ chia sẻ chi tiết hơn về microservice. Mọi người xem nhé

  • DNS là gì?

    DNS là gì?

    DNS là viết tắt của cụm từ Domain Name System, mang ý nghĩa đầy đủ là hệ thống phân giải tên miền. DNS được phát minh vào năm 1984 cho Internet, chỉ một hệ thống cho phép thiết lập tương ứng giữa địa chỉ IP và tên miền.

  • Cách download, upload file lên ftp sử dụng SftpClient Renci.SshNet

    Cách download, upload file lên ftp sử dụng SftpClient Renci.SshNet

    Hôm nay mình sẽ hướng dẫn các bạn thao tác check exits folder, file, cách upload file, download file, delete file từ ftp về máy local sử dụng thư viện SftpClient Renci.SshNet trong c#

  • Lập trình website có nhiều ngôn ngữ bằng google dịch sử dụng asp.net

    Lập trình website có nhiều ngôn ngữ bằng google dịch sử dụng asp.net

    Trong bài viết này, tôi sẽ thảo luận về công cụ chuyển đổi ngôn ngữ trong ASP.NET sử dụng plugin Website Translator miễn phí của Google. Plugin chuyển đổi ngôn ngữ của Google này là một công cụ rất mạnh mẽ sẽ chuyển đổi nội dung trang web của bạn sang các ngôn ngữ khác nhau trong vòng vài giây. Plugin này hỗ trợ hơn 90 ngôn ngữ.