Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > File Upload với Progress bar
File Upload với Progress bar
Nguyễn Trung Hiếu
Share Code Web Company 2012

File Upload với Progress bar

Bài viết sau sẽ hướng dẫn các bạn làm 1 trang upload file với thanh progress bar.

I. Introduction

Widget File upload sẽ hiển thị thời gian thực file upload bằng progress bar
file upload with progress bar

II. Background

Nó sẽ cho phép user có thể upload, download, delete file mà không cần phải load lại trang

III. Using the code

Widget bao gồm

  • Trang upload (Default.aspx)
    • IFRAME chứa trang sử lý upload
    • Một button upload (Cho phép user thực hiện upload file lên server)
    • Khung hiển thị thông tin file upload( bao gồm tên file, trạng thái, tiến trình…)
    • Grid (hiển thị danh sách file đã upload)
    • Hidden field
  • Upload Engine(UploadEngine.aspx)
    • File Upload control

Default.aspx

file upload with progress bar

UploadEngine.aspx

file upload with progress bar
Trong khi load trang, nó sẽ đăng ký sự kiện cho nút Upload
file upload with progress bar

  • Chọn file Upload
  • Click button upload (đăng ký sự kiện ở trên)
    file upload with progress bar
  • Hiển thị tiến trình bằng thời gian thực
    file upload with progress bar
  • Thực hiện cập nhật thông tin vào khung hiển thị
    file upload with progress bar
  • Hai tiến trình sẽ thực hiện song song phía server
    • Upload Engine
      file upload with progress bar
    • Default
      file upload with progress bar
  • Trong khi file đang upload thì thông tin của nó hiển thị như bên dưới
    file upload with progress bar
  • 2 Hàm dưới đây thực hiện việc download và delete file
    file upload with progress bar
  • Các trình duyệt hỗ trợ widget này
    file upload with progress bar

Chúc các bạn thành công

Download Code

(CodeProject)

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.777 hits
%d bloggers like this: