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ẻ <head> của trang web:
<-- 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ã HTML :
<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>
Bạn có thích bài viết này?
Neo
Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web 
. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.