Share code ajax upload

[AdminAdmin is verified member.]

Với những website hiện tại, để upload một file, bạn cần phải sử dụng tag[Input type=file] để thực hiện. Đồng thời bạn phải tải lại trang để Upload lên server. Với code AjaxUpload, việc tải file lên server trở hên đơn giản và ứng dụng dể dàng vào web 2.0 và các kỹ thuật với Ajax

AjaxUpload cho phép bạn tải lên server một hoặc nhiều file liên tục mà không phải tải lại trang hay cần phải có popup. Nó hoạt động tốt ở tất cả các trình duyệt từ phiên bản 2.0 và không yêu cầu phải có một thư viện nào đi kèm. Đồng thời không gây xung đột với những biến toàn cục đang sử dụng của website và có thể tương thích với các thư viện javascript jQuery, Prototypejs, Mootools, và các thư viện JavaScript khác.

Demo: Xem demo ajaxUpload với jQuery tại đây.

Download: Bản 3.9 ở đính kèm
SỬ DỤNG Ở CLIENT:
Tạo một phần tử như một "nút lệnh" để thực hiện việc upload. Có thể sử dụng bất cứ tag:HTML nào, chỉ cần mang thuộc tính id.

<div id="upload_button">Uploaddiv>

Tạo một cài đặt cho nút lệnh ở trên:

// Chú ý: phải tạo sau khi đối tượng DOM đã sẵn sàng chạy
    // Dùng cú pháp $(document).ready nếu sử dụng thư viện jQuery
    // document.observe("dom:loaded") for prototype
    new AjaxUpload('upload_button_id', {action: 'upload.php'});
    // upoad.php là server sẽ xữ lý file uplload.

 Cấu hình đầy đủ cho AjaxUpload: 

 new AjaxUpload('#upload_button_id', {

      // khai báo server sẽ xữ lý file upload.
      // Chú ý: Bạn không thể khai báo những file asp hay php ngoài domain.
  action: 'upload.php',

     // Tên file Upload
  name: 'userfile',

     // Các dữ liệu mở rộng
  data: {
    example_key1 : 'example_value',
    example_key2 : 'example_value2'
  },

     // Gửi file ngay sau khi chọn file xong
  autoSubmit: true,

  responseType: false,

  onChange: function(file, extension){
       // Sau khi file được lựa chọn
       // Nếu có sự thay đổi lựa chọn file thì viết tiếp code
       //ở đây. điều kiện autoSubmit = false.
       // @param file basename: Tên file upload
       // @param extension: Phần mở rộng của file upload
  },

  onSubmit: function(file, extension) {
      // Action khi việc upload đang diễn ra
      // Ví dụ hiển thị một thông báo đang upload
      // @param file basename of uploaded file
      // @param extension of that file
 },

  onComplete: function(file, response) {
      // ACtion khi việc upload hoàn thành.
      // Ví dụ hiển thị thông báo đã upload thành công.
      // Chú ý không được trả về chuổi false trong response
      // @param file: Tên file được upload
      // @param response: Chuổi được trả về tử server.
 }
});

XỮ LÝ FILE UPLOAD Ở SERVER:

Nếu đang sử dụng PHP:

$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
  // Otherwise onSubmit event will not be fired
  echo "error";
}

Nếu đang sử dụng ASPX:

using System;
using System.Web;
using System.IO;

public class FileHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string strFileName = Path.GetFileName(context.Request.Files[0].FileName);
        string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower();
        string strSaveLocation = context.Server.MapPath("Upload") + "" + strFileName;
        context.Request.Files[0].SaveAs(strSaveLocation);

        context.Response.ContentType = "text/plain";
        context.Response.Write("success");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

CHỈ CHO PHÉP UPLOAD MỘT SỐ FILE NÀO ĐÓ:
Trường hợp bạn muốn kiểm tra và chỉ cho phép một số loại file nào đó được upload, bạn có thể cấu hình theo cách dưới:

new AjaxUpload('#button2', {
        action: 'upload.php',
        onSubmit : function(file , ext){
                if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                        // extension is not allowed
                        alert('Error: invalid file extension');
                        // cancel upload
                        return false;
                }
        }
});

Tải xuống tuoitreit.vn_valums-ajax-upload-3.9-0-g6f977de.zip (14.58 kb)