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>