[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

  • Sự khác nhau giữa Application, Virtual Direction và Site. Cách tạo 1 Virtual Direction.

    Sự khác nhau giữa Application, Virtual Direction và Site. Cách tạo 1 Virtual Direction.

    Trong IIS, bạn có thể tạo các trang web, ứng dụng và thư mục ảo để chia sẻ thông tin với người dùng qua Internet, mạng nội bộ hoặc mạng phụ. Mặc dù các khái niệm này đã tồn tại trong các phiên bản trước của IIS, một số thay đổi trong IIS 7 trở lên ảnh hưởng đến định nghĩa và chức năng của các khái niệm này. Quan trọng nhất, các trang web, ứng dụng và thư mục ảo giờ đây hoạt động cùng nhau theo mối quan hệ phân cấp như những khối xây dựng cơ bản để lưu trữ nội dung trực tuyến và cung cấp dịch vụ trực tuyến.

  • Design pattern là gì? Tại sao nên sử dụng Design pattern?

    Design pattern là gì? Tại sao nên sử dụng Design pattern?

    Design pattern là các giải pháp tổng thể đã được tối ưu hóa, được tái sử dụng cho các vấn đề phổ biến trong thiết kế phần mềm mà chúng ta thường gặp phải hàng ngày. Đây là tập các giải pháp đã được suy nghĩ, đã giải quyết trong tình huống cụ thể.

  • CDN là gì? Khi nào thì cần xài CDN cho website

    CDN là gì? Khi nào thì cần xài CDN cho website

    Thuật ngữ CDN có thể bạn sẽ bắt gặp khá nhiều bài viết trên thachpham.com, hoặc khi bạn cần một người có kinh nghiệm tư vấn giải pháp tiết kiệm băng thông máy chủ và tăng tốc độ website đều sẽ được nghe tư vấn là sử dụng CDN. Vậy CDN chính xác là cái gì, có bao nhiêu loại CDN, và website của bạn có thích hợp để sử dụng CDN không thì bài này sẽ cung cấp cho bạn các thông tin cần thiết đó.

  • Giao thức HTTP và HTTPS là gì? Tại sao nên sử dụng HTTPS?

    Giao thức HTTP và HTTPS là gì? Tại sao nên sử dụng HTTPS?

    Môi trường internet phát triển, kéo theo tội phạm mạng tăng cao, vì thế cần có những chuẩn bảo mật web cao hơn. Đó là lí do giao thức HTTPS dần thay thế hoàn toàn HTTP. Vậy, giao thức HTTPS là gì? HTTP và HTTPS khác nhau như thế nào? Và tại sao các website nên dùng HTTPS thay vì HTTP? Bài viết này sẽ giúp bạn giải đáp tất cả những thắc mắc đó.

  • Tích hợp zalo vào website.

    Tích hợp zalo vào website.

    Nếu bạn là một người có website bán hàng thì việc liên hệ thuận lợi nhanh cho khách hàng luôn là ưu tiên hàng đầu. Cũng chính vì lí dó này mình đã tìm hiểu sau khi chèn cho website của mình. Thấy hay nên chia sẻ cho mọi người có nhu cầu.

  • 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.