ASP.NET Jquery+ajax上传文件(带进度条)
效果图
支持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参考: 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上传文件(带进度条)的更多相关文章
- asp.net mvc 实现上传文件带进度条
本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...
- Extjs 使用fileupload插件上传文件 带进度条显示
一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...
- FormData上传文件 带进度条
* jQuery ajax FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- jQuery ajax上传文件实例
jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...
- java进行文件上传,带进度条
网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- 【Web】前端文件上传,带进度条
最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...
随机推荐
- 【LeetCode 239】Sliding Window Maximum
Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...
- selenium python (十三)对于分页的处理
#!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #对于web上分页的功能,一般做如下操作: #获取总页数 # ...
- 【转】linux之e2label命令
转自:http://www.th7.cn/system/lin/201311/46743.shtml 前言 e2label命令,用于获取或设置ext2.ext3文件系统对应的分区的卷标. 卷标:简单来 ...
- 精品手游《里奥的财富》高清版逆向移植家用机与PC平台(转)
冒险动作游戏<里奥的财富>于去年10月登陆移动平台,曾荣获App Store“年度优秀游戏”.开发商宣布将推出其HD版本,近期会陆续登陆PS4.PC.MAC.Xbox One平台. 由瑞典 ...
- 对于cocos2d-x lua的防护措施
自从cocos2d-x 用了 luajit之后,对于我们用lua开发的开发者来说,可是一个好消息,不单性能提升了不少,更重要的是在lua加密方面省了不少心,为什么,就是因为,luajit编译的字节码, ...
- python中的静态方法和类方法
在python中,各种方法的定义如下所示: class MyClass(object): #在类中定义普通方法,在定义普通方法的时候,必须添加self def foo(self,x): print & ...
- mvc中@RenderSection()研究
一.@RenderSection定义 HelperResult RenderSection(string name) 但是当如果使用了_Layout.cshtml做母版页的页没有实现Section的话 ...
- SAS、R以及SPSS的比较__统计语言大战
- LeetCode(7) - Reverse Integer
题目的要求就是要反转一个Integer,例如输入123,则输出321,这一题比较tricky的地方就是它有可能越界,就是说1234567899,反过来是9987654321是一个越界的Integer, ...
- 【Siverlight - 扩展篇】Silverlight在OOB模式下实现默认打开最大化
在App.xaml.cs中输入以下代码:在OOB客户端打开,可以实现窗口默认最大化: private void Application_Startup(object sender, Startup ...