效果图

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

上传时候会显示进度条.

需要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 > )

        {

            //HttpContext.Current.Request.FilePath;

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

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

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

        }

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

下载地址

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

ASP.NET Jquery+ajax上传文件(带进度条)的更多相关文章

  1. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  2. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  3. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  4. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  5. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  6. java进行文件上传，带进度条

    网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...

  7. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  8. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  9. 【Web】前端文件上传，带进度条

    最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...

随机推荐

  1. 读取raw目录中的文件数据

    try { InputStream is2 = getResources().openRawResource(R.raw.info); InputStreamReader isr2 = new Inp ...

  2. TestNG中同一个类中执行多个test()方法如何配置testng.xml

    public class IndexInfo extends BaseTesting{ private IndexPage IndexPage1;// private AddEquipmentInfo ...

  3. SQL跨数据库复制表数据

    SQL跨数据库复制表数据   不同服务器数据库之间的数据操作 不同数据库之间复制表的数据的方法: 当表目标表存在时: insert into 目的数据库..表 select * from 源数据库.. ...

  4. 动态定义数组 .xml

    pre{ line-height:1; color:#3c3c3c; background-color:#d2c39b; font-size:16px;}.sysFunc{color:#627cf6; ...

  5. XML Schema 简介

    XML Schema 是基于 XML 的 DTD 替代者. XML Schema 可描述 XML 文档的结构. XML Schema 语言也可作为 XSD(XML Schema Definition) ...

  6. Python的descriptor (2)

    前面说了descriptor,这个东西其实和Java的setter,getter有点像.但这个descriptor和上文中我们开始提到的函数方法这些东西有什么关系呢? 所有的函数都可以是descrip ...

  7. 排列组合+组合数取模 HDU 5894

    // 排列组合+组合数取模 HDU 5894 // 题意:n个座位不同,m个人去坐(人是一样的),每个人之间至少相隔k个座位问方案数 // 思路: // 定好m个人 相邻人之间k个座位 剩下就剩n-( ...

  8. hadoop的ganglia数据监控

    如果我们想知道当前运行的hadoop集群的状态,可以通过hadoop的客户端和web页面来获得,但是如果我们想知道当前集群的繁忙程度,如读写次数,这些工具就办不到了.幸运的是hadoop提供了一种ga ...

  9. 线性时间内确定T[0:n]是否有一个主元素

    设T[0:n-1]是n 个元素的数组.对任一元素x,设S(x)={ i | T[i]=x}.当| S(x) |>n/2 时,称x 为T 的主元素.设计一个算法,确定T[0:n-1]是否有一个主元 ...

  10. 基于AWS的自动化部署实践

    过年前,我给InfoQ写了篇文章详细介绍我们团队在过去4年基于AWS的自动化部署实践.文章包括了:为什么选择AWS.AWS上自动化部署的优势和挑战.我们的解决方案,以及和AWS DevOps方案(Op ...