Cấp bậc tác giả:

HTML

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

Được viết bởi webmaster ngày 13/08/2013 lúc 06:07 PM
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.
  • 0
  • 2343
Tải tệp tin: Click ở đây

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.

uploadshowsmallimage.jpg

Cách sử dụng :

Trước tiên, bạn cần có jQuery 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>

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML