Hướng Dẫn Viết Chức Năng Thêm ,xóa ảnh Bằng Javascript (Jquery)

Trang chủ » Chèn Hình ảnh Vào Js » Hướng Dẫn Viết Chức Năng Thêm ,xóa ảnh Bằng Javascript (Jquery)

Có thể bạn quan tâm

Nhiều website ngày nay thường cho phép người dùng comment bằng hình ảnh, nó tương tự như chức năng comment bằng hình ảnh của các mạng xã hội (facebook,zalo…), các website thương mại điển tử.

thêm hình ảnh bằng js.png
Ví dụ về 1 trang như thế

Hôm nay mình sẽ hướng dẫn cho các bạn viết chức năng này bằng Javascript (js)kết hợp với jquery

Jquery là một trong những framework mạnh mẽ của js để để tạo ra các hiệu ứng có thể tương tác trực tiếp với người đọc một cách nhanh chóng và dễ dàng hơn rất nhiều là sử dụng thuần JavaScript.

Trước tiên ta phải có thư viện jquery.

    • thư viện Jquery (bạn có thể down nó tại đây :

https://jquery.com/

      • Thêm thư viện icon awesome trong thẻ
      https://use.fontawesome.com/9b42ba68a2.js

Trước tiên ta phải thiết kế giao diện cho nó ta chèn 1 hình ảnh hoặc một nút để chọn file từ máy tính.

<span id="previewImg"></span> <!-- span hứng images chọn từ fle --> <input class="hinh" type="image" src="add.JPG" width="100px"/> <!-- ảnh để chọn file --> <input style="display: none" type='file' id="files" name="image" multiple="multiple" />

sự kiện click vào ảnh mở cửa sổ chọn file.

script type="text/javascript"&amp;amp;gt; $(document).ready(function(){ $("input[type='image']").click(function() { $("input[id='files']").click(); }); }); function handleFileSelect(evt) { var files = evt.target.files; // FileList object // 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(); //biến hiện images ra // Closure to capture the file information. reader.onload = (function (theFile) { return function (e) { // render thumbnail. var span = document.createElement('span'); span.innerHTML = ['&amp;amp;lt;img class="thumb alignnone" title="', escape(theFile.name), '" src="', e.target.result,'" /&amp;amp;gt;' ,'&amp;amp;lt;i class="fa fa-times time "&amp;amp;gt;&amp;amp;lt;/i&amp;amp;gt;'].join(''); document.getElementById('previewImg').insertBefore(span, null); //chèn images vào span dựng sẵn có ID previewImg }; }) (f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false);  ta chạy lên và được kết quả như sau: nhớ trước khi chạy ,Thêm 1 tí CSS cho nó: .hinh { border: 1px solid #369; } .hinh:hover{ opacity: 0.4; border: 1px solid deeppink; } .thumb { border: 1px solid #000000; height: 100px; width: auto; } .thumb{ margin-right: 10px; position: relative; z-index: 999; } .thumb:hover{ filter: brightness(0.5); } .time{ position: absolute; margin-left:-25px ; z-index: 999; cursor: pointer; background-color: #ce0122; color: white; } <!-- hàm xóa ảnh --> <script type="text/javascript"> $(document).on('click',".time" ,function() { if(confirm("Bạn Có Muốn Xóa ?")) { $(this).closest("span" ).fadeOut(); $("#files").val(null); //xóa tên của file trong input } else return false; }); </script> });

Ngoài hàm FadeOut ta còn có thể sử dụng các hàm

  • fade(),fadeToggle()
  • closest().remover(),parent().remove()
Capture.JPG

Code Toàn bộ chương trình

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Thêm Ảnh</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <!-- Jquery --> <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> </head> <body> <span id="previewImg"></span> <!-- span hứng images chọn từ fle --> <input class="hinh" type="image" src="add.JPG" width="100px"/> <!-- ảnh để chọn file --> <input style="display: none" type='file' id="files" name="image" multiple="multiple" /> <!-- sự kiện click into images --> <script type="text/javascript"> $(document).ready(function(){ $("input[type='image']").click(function() { $("input[id='files']").click(); }); }); </script> <!-- hàm chọn ảnh --> <script type="text/javascript" > function handleFileSelect(evt) { var files = evt.target.files; // FileList object // 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(); //biến hiện images ra // Closure to capture the file information. reader.onload = (function (theFile) { return function (e) { // render thumbnail. var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>' ,'<i class="fa fa-times time " ></i>'].join(''); document.getElementById('previewImg').insertBefore(span, null); //chèn images vào span dựng sẵn có ID previewImg }; }) (f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script> <!-- hàm xóa ảnh --> <script type="text/javascript"> $(document).on('click',".time" ,function() { if(confirm("Bạn Có Muốn Xóa ?")) { $(this).closest("span" ).fadeOut(); $("#files").val(null); //xóa tên của file trong input } else return false; }); </script> <!-- có thể dùng hàm closest().remover(),parent().remove(),fadeOut(),fadeToggle() //$(document).on('click',".time" ,function() { //$(this).parent().remove(); //}); --> </body> </html>

Các bạn có thể xem Demo tại Đây

Chia Sẻ Lên:

  • Bấm để chia sẻ trên Twitter (Mở trong cửa sổ mới)
  • Nhấn vào chia sẻ trên Facebook (Mở trong cửa sổ mới)
Thích Đang tải...

Từ khóa » Chèn Hình ảnh Vào Js