效果图

支持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. jquery小技巧汇总 持续更新中

    1.jquery高亮当前选中菜单 $("document").ready(function(){ $(".menu li").click(function(){ ...

  2. Cocos2d-android (01) 创建一个简单的cocos2d应用程序

    下载Cocos2d-android的源代码:cocos2d-android-1 git@github.com:ZhouWeikuan/cocos2d.git 将项目导入到eclipse中.运行实例: ...

  3. 使用curl操作openstack swift

    openstack官网有专门的开发者文档介绍如何使用curl操作swift(http://docs.openstack.org/api/openstack-object-storage/1.0/con ...

  4. [转]对Android开发者有益的40条优化建议

    下面是开始Android编程的好方法: 找一些与你想做事情类似的代码 调整它,尝试让它做你像做的事情 经历问题 使用StackOverflow解决问题 对每个你像添加的特征重复上述过程.这种方法能够激 ...

  5. Microsoft Azure云计算第一步—试用帐户申请

    从本文开始,将会对Microsoft Azure云从Iaas, Paas, Saas三种类型的云应用通过文章进行介绍.千里之行,始于帐户:),如果大家需要申请免费试用帐户请参考本文. 对于直接付钱的壕 ...

  6. iOS打开手机QQ与指定用户聊天界面

    开发中遇到一个联系客服qq的需求,找到这么一个实现方法,先记录下来.大概的原理就是,iOS启动第三方应用是采用schema模式的,这有点像url,打开不同的界面使用不同的地址.但这个url怎么得来的还 ...

  7. js运动 多物体运动含Json 但是里面数值不一样

    <!doctype html> <html> <head> <meta charset = "utf-8"> <title&g ...

  8. 由于SSH配置文件的不匹配，导致的Permission denied (publickey)及其解决方法。

    读者如要转载,请标明出处和作者名,谢谢.地址01:http://space.itpub.net/25851087地址02:http://www.cnblogs.com/zjrodger/作者名:zjr ...

  9. 让CSS3给你的文字加上边框宽度，并实现镂空效果

    这次,我主要向大家介绍一下CSS3下的-webkit-text-stroke属性,并分享几个用该属性制作的镂空文字效果. 1.-webkit-text-stroke属性简介 CSS边框的一个不足就是只 ...

  10. TreeSet介绍

    一.TreeSet原理: 1.TreeSet存储对象的时候, 可以排序, 但是需要指定排序的算法 2.Integer能排序(有默认顺序), String能排序(有默认顺序), 自定义的类存储的时候出现 ...