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