效果图
支持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 > 0) { //HttpContext.Current.Request.FilePath; string strPath = System.Web.HttpContext.Current.Server.MapPath("~/upload/"); string strName = context.Request.Files[0].FileName; context.Request.Files[0].SaveAs(System.IO.Path.Combine(strPath, strName)); } } public bool IsReusable { get { return false; } } }
下载地址
http://download.csdn.net/detail/wukaiping870123/6259419