RSSJquery

Xem hình ảnh nhỏ trước khi Upload

Chắc chắn rằng các bạn làm web đã từng ít nhất 1 lần viết một ứng dụng web có up hình ảnh lên trên web. Các bạn mong muốn người dùng có thể xem trước hình ảnh trước khi lưu trữ dữ liệu.

Hiển thị ảnh nhỏ trước khi upload

Chắc chắn rằng các bạn làm web đã từng ít nhất 1 lần viết một ứng dụng web có up hình ảnh lên trên web. Các bạn mong muốn người dùng có thể xem trước hình ảnh trước khi lưu trữ dữ liệu.

Để giải quyết vấn đề này có 2 cách:

- Cách 1: Upload file ảnh  lên server (Sử dụng ajax) vào 1 thư mục tạm, sau khi quá trình submit form thành công các bạn viết mã chuyển tập tin vừa upload vào thư mục hình chính thức và xóa tập tin cũ khi đã lưu trữ quá 1 ngày trở lên. Hoặc là lưu trực tiếp lên server chấp nhận sự dư thừa dữ liệu.

- Cách 2: Sử dụng javascript để lấy hình ảnh nhỏ hiện lên trước ngay tại client mà không cần tương tác đến webserver. Cách này tương đối dễ dàng, nhanh chóng tiết kiệm tài nguyên.

Sau đây là bài viết hưỡng dẫn các bạn tạo tính năng xem ảnh nhỏ trước khi upload bằng javascript + jQuery:

Bước 1: Thêm thư viện jquery vào thẻ head trang web của bạn

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>


Bước 2: Thêm đoạn script sau đây sau script thư viện jquery

<script type="text/javascript">
  function  readURL(input,thumbimage) {
   if  (input.files && input.files[0]) { //Sử dụng  cho Firefox - chrome
   var  reader = new FileReader();
    reader.onload = function (e) {
    $("#thumbimage").attr('src', e.target.result);
     }
     reader.readAsDataURL(input.files[0]);
    }
    else  { // Sử dụng cho IE
      $("#thumbimage").attr('src', input.value);
 
    }
    $("#thumbimage").show();
    $('.filename').text($("#uploadfile").val());
    $('.Choicefile').css('background', '#C4C4C4');
    $('.Choicefile').css('cursor', 'default');
    $(".removeimg").show();
    $(".Choicefile").unbind('click'); //Xóa sự kiện  click trên nút .Choicefile
         
  }
  $(document).ready(function () {
   $(".Choicefile").bind('click', function  () { //Chọn file khi .Choicefile Click
    $("#uploadfile").click();
              
   });
   $(".removeimg").click(function () {//Xóa hình  ảnh đang xem
      $("#thumbimage").attr('src', '').hide();
      $("#myfileupload").html('<input type="file" id="uploadfile"  onchange="readURL(this);" />');
      $(".removeimg").hide();
      $(".Choicefile").bind('click', function  () {//Tạo lại sự kiện click để chọn file
       $("#uploadfile").click();
      });
      $('.Choicefile').css('background','#0877D8');
      $('.Choicefile').css('cursor', 'pointer');
      $(".filename").text("");
    });
   })
</script>

Bước 3: Code css

<style type="text/css">
 .Choicefile
  {
   display:block;
   background:#0877D8;
   border:1px solid #fff;
   color:#fff;
   width:100px;
   text-align:center;
   text-decoration:none;
   cursor:pointer;
   padding:5px 0px;
   }
   #uploadfile,.removeimg
   {
    display:none;
   }
   #thumbbox
   {
    position:relative;
    width:100px;
   }
   .removeimg
   {
   background:  url("http://png-3.findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_05.png")  repeat scroll 0 0 transparent;
   height: 24px;
   position: absolute;
   right: 5px;
   top: 5px;
   width: 24px;
 
   }
</style>

Bước 4: Nội dung HTML

<div>
 <div id="myfileupload">
   <input type="file" id="uploadfile" name="ImageUpload" onchange="readURL(this);" />
   <!--      Name  mà server request về sẽ là ImageUpload-->
 
 </div>
 <div id="thumbbox">
  <img height="100" width="100" alt="Thumb image" id="thumbimage" style="display: none" />
  <a class="removeimg" href="javascript:" ></a></div>
 <div id="boxchoice">
  <a href="javascript:" class="Choicefile">Chọn file</a>
  <p style="clear:both"></p>
 </div>
  <label class="filename"></label>
</div>

Sau khi xong 4  bước trên vậy là lúc này các bạn đã có được một công cụ xem ảnh trước khi upload bằng javascript như ý muốn.

Do đây là version đầu tiên  nên có thể còn hạn chế các bạn sử dụng và đóng góp thêm ý kiến để mình phát triển thêm.

Mình  đã test qua chạy tốt trên trình duyệt IE 7-10 (6 Chưa được test), Firefox, chrome.

Các bạn có thể download code demo tại đây

Cảm ơn các bạn đã xem bài viết !

Vũ Hữu Triệu

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu