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

时间：2023-02-17 08:34:06

效果图

支持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 > )

        {

            //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&period;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&sol;9 JQuery&period;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" &gt ...

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

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

随机推荐

  1. word20161218

    QoS, Quality of Service / 服务质量 QoS Admission Control Service / QoS 许可控制服务 Quality of Service, QoS / ...

  2. Request 和 Response 原理

    * Request 和 Response 原理:     * request对象和response对象由服务器创建,我们只需要在service方法中使用这两个对象即可        * 继承体系结构: ...

  3. VB逆向

    大家或许有所察觉了,随着我们课程的不断深入学习,我们感觉自身逆向的“内功”也在不断的增进! 我们从爆破入手,到现在逐步大家进入程序的内部,认识不同编译器开发的程序,探索不同的加密逻辑. 前边,我们的例 ...

  4. JPEG最优压缩参数试验【光影魔术手VS Image Optimizer】

                                          样本数量:100张(1MB-2.6MB)旅游照     样本大小:157MB 156.44      样本尺寸:3M(204 ...

  5. DELL R710服务器可以安装的VMWare ESX Server 4&period;1 全套下载带注册码

    随着R710的停产,R720随之面世,但DELL R720服务器只支持vmware esxi5.0以上,DELL客户经理给了一套系统安装后序列号无法解决,还是用4.1好了,却又发现怎么都无法安装.按网 ...

  6. 美洽SDK

    简介 GitHub地址:https://github.com/Meiqia/MeiqiaSDK-Android 开发文档:http://meiqia.com/docs/meiqia-android-s ...

  7. javascript 终止函数执行操作

    1.如果终止一个函数的用return即可,实例如下:function testA(){    alert('a');    alert('b');    alert('c');}testA(); 程序 ...

  8. 动态代理的两种方式，以及区别（静态代理、JDK与CGLIB动态代理、AOP&plus;IoC）

    Spring学习总结(二)——静态代理.JDK与CGLIB动态代理.AOP+IoC   目录 一.为什么需要代理模式 二.静态代理 三.动态代理,使用JDK内置的Proxy实现 四.动态代理,使用cg ...

  9. Logistic回归中损失函数求导证明过程

  10. &lbrack;模式识别&rsqb;&period;&lpar;希腊&rpar;西奥多里蒂斯&amp&semi;lt&semi;第四版&amp&semi;gt&semi;笔记5之&lowbar;&lowbar;特征选取

    1,引言 有关模式识别的一个主要问题是维数灾难.我们将在第7章看到维数非常easy变得非常大. 减少维数的必要性有几方面的原因.计算复杂度是一个方面.还有一个有关分类器的泛化性能. 因此,本章的主要任 ...

相关文章