效果图

支持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. Code Hard or Go Home

    介绍Webkit的渊源  http://hypercritical.co/2013/04/12/code-hard-or-go-home

  2. Substrings 子字符串-----搜索

    Description You are given a number of case-sensitive strings of alphabetic characters, find the larg ...

  3. 设计模式 适配器-Adapter

    适配器模式:将一个类的接口,转换成客户期望的另一个接口.适配器让原本接口不兼容的类可以合作无间. 直接上图.下面是对象适配器的类图.由于Java不支持多继承.所以这是Java的适配器实现方式. 结合H ...

  4. jquerymobile，手机端click无效

    1.直接把<script>放到html代码后面,不要放到@section里面. 2.使用代理.如下所示: <script type="text/javascript&quo ...

  5. 转】Mahout推荐算法API详解

    原博文出自于: http://blog.fens.me/mahout-recommendation-api/ 感谢! Posted: Oct 21, 2013 Tags: itemCFknnMahou ...

  6. 转】使用Maven编译项目遇到——“maven编码gbk的不可映射字符”解决办法

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4239006.html 感谢! 一.问题描述 今天在MyEclipse中使用Maven编译项目源代码时,结果如下了 ...

  7. 如何判断Android设备是手机还是平板？

    转自:http://blog.csdn.net/zuolongsnail/article/details/8682950 Android开发需要适配手机和平板,有些需求在实现中就要判断设备是手机还是平 ...

  8. 应用TcpListener实现的socket服务器端

    前言 项目中要实现一个简单的socket服务器端,采用了TcpListener这个类.除了基本的功能之外,有几处需要注意的点. 要能同时接收多个客户端的连接,当然,不需要几千个那么多. 要能探测到客户 ...

  9. SD卡中的命令CMD

    SD卡中的命令是SD控制器和SD卡之间的桥梁,它封装了SD卡的实现细节,不影响SD卡中FLASH的读写变更. 命令的长度是48位,它的字段如图: SD校准定义的CMD如下:

  10. AutoCAD.NET二次开发错误集锦

    1.CAD崩溃,错误“unhandled access violation reading”=“未将对象引用设置到对象的实例”. 2. 建模操作错误:指向给定边的指针为空. 建模操作错误:访问冲突. ...