[Codes] Hiển thị ảnh nhỏ trước khi upload hình với jQuery

Với ajaxupload
plugin chúng ta có thể thay đổi cách upload ảnh thông thường. Vẫn hai
thao tác đơng giản: chọn một file hình và click upload nhưng với ajaxupload bạn có thể dễ dàng xem hình trước khi quyết định upload.












Cách sử dụng :

Trước tiên, bạn cần có jQuery và AJAX Upload jQuery plugin . Chắc chắn là jQuery phải được để ở vị trí trên cùng . Sau đó thêm vào trong thẻ của trang web:

Code:


<-- Thư viện Jquery và Ajax Upload -->
<script src="/js/jquery.min.js" type="text/javascript"></script> 
<script src="/js/ajaxupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   <-- Chọn vị trí ảnh thumbnail sẽ hiển thị -->
   var thumb = $('img#thumb');
   <-- Chọn input trong form có id là imageUpload -->
     new AjaxUpload('imageUpload', {
      <-- Lấy thuộc tính action từ html -->      
      action: $('form#newHotnessForm').attr('action'),
      <-- Đặt tên để sử dụng với server side script -->
      name: 'image',
      <-- Sau khi chọn file thêm class loading vào div preview -->
      onSubmit: function(file, extension) {
         $('div.preview').addClass('loading');
      },
      <-- Sau khi file upload xong bỏ class loadding và hiển thị ảnh thumbnail bằng cách thay đổi thuộc tính src -->
      onComplete: function(file, response) {
         thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
         });
         thumb.attr('src', response);
      }
   });
});
</script>


Và mã trang HTML :

Code:

<div class="preview"> <img id="thumb" width="100px" height="100px" src="/images/icons/128px/zurb.png" /> </div>
<span class="wrap hotness">
<form id="newHotnessForm" action="/playground/ajax_upload">
  <label>Upload a Picture of Yourself</label>
  <input type="file" id="imageUpload" size="20" />
  <button type="submit" class="button">Save</button>
</form>
</span>