在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
一、资源 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--> <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script> <!--JQuery EasyUI--> <link href="css/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/jquery.easyui.min.js"></script> <!--MultiUpload--> <link href="css/default.css" rel="stylesheet" type="text/css" /> <link href="css/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/swfobject.js"></script> <script type="text/javascript" src="scripts/jquery.uploadify.v2.1.0.min.js"></script> <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); } }); }); </script> </head> <body> <div class="easyui-tabs" style="width: 400px; height: 300px;padding-bottom:5px"> <div title="上传文件列表" id="fileQueue" style="padding: 10px;"> </div> <!--<div title="已上传文件" >>
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; } } }
下一篇谈一下如何让上传的文件跟特定的数据库信息关联。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论