Thứ bảy, ngày 3 tháng 12 năm 2016

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

Ngày đăng: 27/4/2011, 16:43:3AM | Lượt xem: 4,158
Hot!

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.

Demo

Cách sử dụng :

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

01 <-- Thư viện Jquery và Ajax Upload -->
02 <script src="/js/jquery.min.js" type="text/javascript"></script
03 <script src="/js/ajaxupload.js" type="text/javascript"></script>
04 <script type="text/javascript">
05 $(document).ready(function(){
06     <-- Chọn vị trí ảnh thumbnail sẽ hiển thị -->
07     var thumb = $('img#thumb');
08     <-- Chọn input trong form có id là imageUpload -->
09     new AjaxUpload('imageUpload', {
10         <-- Lấy thuộc tính action từ html -->    
11         action: $('form#newHotnessForm').attr('action'),
12         <-- Đặt tên để sử dụng với server side script -->
13         name: 'image',
14         <-- Sau khi chọn file thêm class loading vào div preview -->
15         onSubmit: function(file, extension) {
16             $('div.preview').addClass('loading');
17         },
18         <-- 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 -->
19         onComplete: function(file, response) {
20             thumb.load(function(){
21                 $('div.preview').removeClass('loading');
22                 thumb.unbind();
23             });
24             thumb.attr('src', response);
25         }
26     });
27 });
28 </script>

Và mã HTML :

1 <div class="preview"> <img id="thumb" width="100px" height="100px" src="/images/icons/128px/zurb.png" /> </div>
2 <span class="wrap hotness">
3 <form id="newHotnessForm" action="/playground/ajax_upload">
4   <label>Upload a Picture of Yourself</label>
5   <input type="file" id="imageUpload" size="20" />
6   <button type="submit" class="button">Save</button>
7 </form>
8 </span>
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.