ASP.NET Jquery+ajax上传文件(带进度条)

效果图

支持ie6+,chrome,ie6中文文件名会显示乱码.

上传时候会显示进度条.

ASP.NET Jquery+ajax上传文件(带进度条)

需要jquery.uploadify.js插件,稍后会给出下载

前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">



    <script src="fileupload/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>



<!-- 脚本部分提示修改为中文 -->

    <script src="fileupload/jquery.uploadify.js" type="text/javascript" language="javascript"></script>



    <link href="fileupload/uploadify.css" rel="stylesheet" type="text/css" />



    <script type="text/javascript" language="javascript">

    $(function() {

        $("#file_upload").uploadify({

            'auto': false,                      //是否自动上传

            'swf': 'fileupload/uploadify.swf',      //上传swf控件,不可更改

            'uploader': 'Handler.ashx',            //上传处理页面,可以aspx

            'fileTypeDesc':'pdf文件或者图像',

            'fileTypeExts':'*.pdf;*.jpg;*.jpeg;*.gif;*.png',   //文件类型限制,默认不受限制

            'buttonText':'浏览文件',//按钮文字

            'width'     :100,

            'height'    :26,

            //最大文件数量'uploadLimit':

            'multi'     :false,//单选            

            'fileSizeLimit':'20MB',

            'queueSizeLimit':1,  //队列限制

            'removeCompleted' : false

        });

    });

    </script>



    <title>Jquery文件上传</title>

</head>

<body>

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

        <input type="file" name="file_upload" id="file_upload" />

        <a href="javascript:$('#file_upload').uploadify('cancel')" >删除</a><!-- 删除文件实际操作通过ajax提交. -->

        <a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>

      

        <br />

        <br />

        <br />

        <br />

        <br />

        <br />

        api参考:&nbsp;http://www.uploadify.com/documentation/

    </form>

</body>

</html>

后台无,

处理ashx页面代码:

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



using System;

using System.Web;



public class Handler : IHttpHandler {

    

    public void ProcessRequest (HttpContext context) {

        if (context.Request.Files.Count > 0)

        {

            //HttpContext.Current.Request.FilePath;

            string strPath = System.Web.HttpContext.Current.Server.MapPath("~/upload/");

            string strName = context.Request.Files[0].FileName;

            context.Request.Files[0].SaveAs(System.IO.Path.Combine(strPath, strName));

        }

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }



}

 

 下载地址

http://download.csdn.net/detail/wukaiping870123/6259419

你可能感兴趣的:(asp.net)