一、資源
1）Uploadify v2.1.0，可以到這裏下載：www.uploadify.com。
2）JQuery EasyUI ，下載地址：http://jquery-easyui.wikidot.com/download
二、預覽
1）初始界面
2） 點擊【BROWSE】選擇多文件
3） 選擇的文件列表，點擊【全部上傳】開始上傳文件隊列
三、代碼
1）解壓jquery.uploadify-v2.1.0.zip，複製example/index.php的代碼，對應粘貼到你的頁面（HTML或ASPX），注意拷貝相應的CSS、JS和SWF文件到你的項目對應目錄
2）解壓 JQuery EasyUI.zip，拷貝相應的CSS、JS文件到你的項目對應目錄，並在你的頁面中的<title></title>標籤中添加引用
HTML：
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>多文件上傳 - 可設置多文件還是單文件上傳，以及上傳文件的大小</title>
- <!--JQuery-->
- <mce:script type="text/javascript" src="scripts/jquery-1.4.2.min.js" mce_src="scripts/jquery-1.4.2.min.js"></mce:script>
- <!--JQuery EasyUI-->
- <link href="css/easyui/themes/default/easyui.css" mce_href="css/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
- <link href="css/easyui/themes/icon.css" mce_href="css/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
- <mce:script type="text/javascript" src="scripts/jquery.easyui.min.js" mce_src="scripts/jquery.easyui.min.js"></mce:script>
- <!--MultiUpload-->
- <link href="css/default.css" mce_href="css/default.css" rel="stylesheet" type="text/css" />
- <link href="css/uploadify.css" mce_href="css/uploadify.css" rel="stylesheet" type="text/css" />
- <mce:script type="text/javascript" src="scripts/swfobject.js" mce_src="scripts/swfobject.js"></mce:script>
- <mce:script type="text/javascript" src="scripts/jquery.uploadify.v2.1.0.min.js" mce_src="scripts/jquery.uploadify.v2.1.0.min.js"></mce:script>
- <mce:script type="text/javascript"><!--
- $(document).ready(function () {
- $("#uploadify").uploadify({
- 'uploader': 'Flash/uploadify.swf',
- 'script': 'UploadHandler.ashx',
- 'cancelImg': 'Images/cancel.png',
- 'folder': 'Uploads',
- 'queueID': 'fileQueue',
- //'fileDesc': '*.rar;*.jpg;*.gif',
- //'fileExt': '*.rar;*.jpg;*.gif',
- 'sizeLimit': '2097152', //2M
- 'auto': false,
- 'multi': true,
- 'onError': function (a, b, c, d) {
- if (d.status == 404)
- alert('Could not find upload script.');
- else if (d.type === "HTTP")
- alert('error ' + d.type + ": " + d.status);
- else if (d.type === "File Size")
- alert(c.name + ' ' + d.type + ' Limit: ' + Math.round(d.sizeLimit / 1024) + 'KB');
- else
- alert('error ' + d.type + ": " + d.info);
- }
- });
- });
- // --></mce:script>
- </head>
- <body>
- <div class="easyui-tabs" style="width: 400px; height: 300px;padding-bottom:5px">
- <div title="上傳文件列表" id="fileQueue" style="padding: 10px;" mce_style="padding: 10px;">
- </div>
- <!--<div title="已上傳文件" id="fileUploaded" closable="false" style="padding: 10px;" mce_style="padding: 10px;">
- </div>-->
- </div>
- <input type="file" name="uploadify" id="uploadify" />
- <p>
- <a href="javascript:$('#uploadify').uploadifyUpload()" mce_href="javascript:$('#uploadify').uploadifyUpload()">全部上傳</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()" mce_href="javascript:$('#uploadify').uploadifyClearQueue()">
- 全部取消</a>
- </p>
- </body>
- </html>
UploadHandler.ashx文件代碼：
- <%@ WebHandler Language="C#" Class="UploadHandler" %>
- using System;
- using System.IO;
- using System.Net;
- using System.Web;
- public class UploadHandler : IHttpHandler
- {
- public void ProcessRequest(HttpContext context)
- {
- context.Response.ContentType = "text/plain";
- context.Response.Charset = "utf-8";
- //獲取上傳文件隊列
- HttpPostedFile oFile = context.Request.Files["Filedata"];
- if (oFile != null)
- {
- string topDir = context.Request["folder"];
- //創建頂級目錄
- if (!Directory.Exists(HttpContext.Current.Server.MapPath(topDir)))
- {
- Directory.CreateDirectory(HttpContext.Current.Server.MapPath(topDir));
- }
- //當天上傳的文件放到已當天日期命名的文件夾中
- string dateFolder = HttpContext.Current.Server.MapPath(topDir) + "//" + DateTime.Now.Date.ToString("yyyy-MM-dd");
- if (!Directory.Exists(dateFolder))
- {
- Directory.CreateDirectory(dateFolder);
- }
- oFile.SaveAs(dateFolder + "//" + oFile.FileName);
- context.Response.Write("1");
- }
- else
- {
- context.Response.Write("0");
- }
- }
- public bool IsReusable
- {
- get { return false; }
- }
- }
下一篇談一下如何讓上傳的文件跟特定的數據庫信息關聯。