Oº°‘¨ [C]hia [S]ẻ [O]nline ¨‘°ºO
♥️Chào Mừng Các Bạn Ghé Thăm Forum Chia Sẻ Online♥️
Rất mong các bạn đăng ký làm thành viên để cùng
nhau chia sẻ mọi nỗi buồn vui
Chúc các bạn có những phút thư giãn vui vẻ
♥️Welcome to forum Chia Sẻ Online♥️
Welcome Guest, is this your first visit? Register
All times are GMT. The time now is 07:28 AM.

You are not connected. Please login or register

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

Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin

avatar
Administrators
Administrators
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ó 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ẻ 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>

Nguồn : NTUTS



Xem lý lịch thành viên http://chiaseonline.forumvi.com/

Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết