Thứ tư, ngày 7 tháng 12 năm 2016

Chọn và upload nhiều file giống như Gmail sử dụng Jquery và ASP.NET

Ngày đăng: 26/3/2011, 22:42:2PM | Lượt xem: 19,368
Hot!

Có 1 vài người hỏi làm thế nào upload nhiều file kiểu AJAX với progress bar tương tự như Google Gmail.Câu trả lời đó là Uploadify , 1 plugin cho Jquery có thể làm điều đó trong vài phút.Bài này tôi sẽ nói về vấn đề này.

Bước 1

Download Uploadify JQuery plugin và JQuery Library dùng link bên dưới.

Download JQuery 

Download Uploadify 

Bạn sẽ cần 4 file như bên dưới :

1. jquery-1.3.2.min.js

2. jquery.uploadify.js

3. uploader.fla

4. uploader.swf

trong thư mục scripts trong thư mục gốc của ứng dụng ASP.NET của bạn.

Bước 2

Mở Visual Studio và hoàn thành như bên dưới

Chèn các file CSS và JS trong thẻ head của trang aspx hoặc trang master

<link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.js"></script>

 

Add 1 control FileUpload ASP.Net

<form id="form1" runat="server">

    <div style = "padding:40px">

        <asp:FileUpload ID="FileUpload1" runat="server" />

    </div>

</form>

 

Đặt đoạn script sau trong thẻ head hoặc trong ContentPlaceHolder trong trường hợp bạn sử dụng Master Pages

<script type = "text/javascript">

$(window).load(

    function() {

    $("#<%=FileUpload1.ClientID %>").fileUpload({

        'uploader''scripts/uploader.swf',

        'cancelImg''images/cancel.png',

        'buttonText''Browse Files',

        'script''Upload.ashx',

        'folder''uploads',

        'fileDesc''Image Files',

        'fileExt''*.jpg;*.jpeg;*.gif;*.png',

        'multi'true,

        'auto'true

    });

   }

);

</script>  

 

Như các bạn thấy chúng ta cần 1 số cài đặt cho FileUpload control. Điểm quan trọng nhất trong đó là 'script''Upload.ashx'  cái này sẽ handle FileUpload và lưu file uploaded vào đĩa.

Bên dưới là code của file Upload.ashx

<%@ WebHandler Language="C#" Class="Upload" %>

 

using System;

using System.Web;

using System.IO;

 

public class Upload : IHttpHandler {

   

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";

        context.Response.Expires = -1;

        try

        {

            HttpPostedFile postedFile = context.Request.Files["Filedata"];

           

            string savepath = "";

            string tempPath = "";

            tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];

            savepath = context.Server.MapPath(tempPath);

            string filename = postedFile.FileName;

            if (!Directory.Exists(savepath))

                Directory.CreateDirectory(savepath);

 

            postedFile.SaveAs(savepath + @"\" + filename);

            context.Response.Write(tempPath + "/" + filename);

            context.Response.StatusCode = 200;

        }

        catch (Exception ex)

        {

            context.Response.Write("Error: " + ex.Message);

        }

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

}

 

Như bạn thấy handle này đơn giản chỉ chấp nhận posted files và lưu file vào thư mục là uploads trong thư mục root của website , đường dẫn này đặt trong AppSettings của Web.Config

<appSettings>

    <add key ="FolderPath" value ="uploads"/>

</appSettings >

 

Đó là tất cả những gì chúng ta cần và sau cùng là chạy website chúng ta


 Chọn File để Upload

Bắt đầu upload file

Thật là dễ phải không nào.Chúc các bạn thành công

 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.