[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

Tạo chatbot với CHAT GPT sử dụng C#

Lập trình

Trong hướng dẫn này, chúng ta sẽ đi sâu vào quá trình xây dựng chatbot bằng ChatGPT và C#. Chúng tôi sẽ đề cập đến mọi thứ, từ thiết lập quyền truy cập API ChatGPT đến triển khai chatbot của bạn. Bắt đầu nào!
Remote SQL Server. Cách mở port 1433 để kết nối với sqlserver từ xa.

Lập trình

Hiện nay nhiều người có xây dựng cơ sở dữ liệu trên server và kết nối tới để làm việc cho tiện. Nên mình chia sẻ bài viết này cho người mới nhé.
Sự khác nhau giữa Application, Virtual Direction và Site. Cách tạo 1 Virtual Direction.

Lập trình

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?

Lập trình

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

Lập trình

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?

Lập trình

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.

Lập trình

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.