效果图
支持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