ASP.NET插件uploadify批量上传文件完整使用教程

uploadify批量上传文件完整使用教程,供大家参考,具体内容如下

1.首先准备uploadify的js文件,网上一搜一大堆

ASP.NET插件uploadify批量上传文件完整使用教程

2.上传页面UpFilePage.aspx

ASP.NET插件uploadify批量上传文件完整使用教程

关键代码:

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>上传文件</title> <link href="https://www.jb51.net/jquery.uploadify/uploadify.css" /> <script type="text/javascript" src="https://www.jb51.net/jquery.uploadify/jquery-1.8.3.min.js"></script> <script src="https://www.jb51.net/jquery.uploadify/swfobject.js" charset="utf-8"></script> <script src="https://www.jb51.net/jquery.uploadify/jquery.uploadify.v2.1.0.js"></script> <style type="text/css"> #fileSave { padding-left:5px; padding-right:5px;} #fileSave .uploadifyQueueItem{ width:530px;} #fileQueue { padding-left:5px; padding-right:5px;} #fileQueue .uploadifyQueueItem { width:530px;} #uploadifyUploader { position:absolute; opacity:0;} .uploadify-button{ height: 30px; line-height: 30px; width: 109px; text-align:center; border:0px; margin-bottom:5px; background:#ff6600; color:#fff;} .cancel a { background:url(/jquery.uploadify/cancel.png) no-repeat center center; display:inline-block; width:16px; height:16px;} </style> </head> <body> <form runat="server"> <div> <div > <div> <input type="file" /> <div><span>添加文件</span></div> </div> <div></div> <div> <%=GetFile() %> </div> </div> </div> </form> <script type="text/javascript"> var fileCount = 0; $(document).ready(function () { fileCount = $("#fileSave>div.uploadifyQueueItem").length; $("input[name='radPhone']:eq(0)").attr("checked", "checked"); $("#uploadify").uploadify({ 'uploader': '/jquery.uploadify/uploadify.swf',//uploadify.swf 文件的相对路径 'script': '/jquery.uploadify/uploadHandler.ashx',//处理文件的程序 //'cancelImg': 'https://www.jb51.net/Scripts/jquery.uploadify/cancel.png',//取消图片 //'folder': 'upfiles',//上传文件存放的目录 'queueID': 'fileQueue',//文件队列的ID //'fileDesc': '*.flv;*.mp4;*.wmv;*.avi;*.3gp;*.mpg;*.ppt;*.pptx',//上传格式限制 //'fileExt': '*.flv;*.mp4;*.wmv;*.avi;*.3gp;*.mpg;*.ppt;*.pptx',//上传格式限制 "queueSizeLimit": "5",//当允许多文件生成时,设置选择文件的个数 'auto': true,//设置为true当选择文件后就直接上传了 'multi': true,//设置为true时可以上传多个文件 "fileDataName": "imgFile",//设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据 "sizeLimit": "5242880",//上传文件的大小限制,以字节为单位 "simUploadLimit": "1",// 允许同时上传的个数 默认值:1 "onSelect": function (e, queueId, fileObj) { fileCount = $("#fileSave>div.uploadifyQueueItem").length; var less = 5 - fileCount; if (less <= 0) { layer.msg("最多只能上传5个附件"); $("#a_upload").attr("href", "javascript:"); return false; } else { $("#a_upload").attr("href", "javascript:$('#uploadify').uploadifyUpload()"); return true; } }, "onComplete": function () { $.ajax({ type: "post", url: "/UploadAction/UploadHandler.ashx", data: { operate: "GetFile" }, async: false, success: function (objdata) { $("#fileSave").html(objdata); fileCount = $("#fileSave>div.uploadifyQueueItem").length; var less = 5 - fileCount; if (less <= 0) { $("#a_upload").attr("href", "javascript:"); $("#fileQueue").html(""); return false; } else { $("#a_upload").attr("href", "javascript:$('#uploadify').uploadifyUpload()"); return true; } } }); }, "onCancel": function () { fileCount = $("#fileSave>div.uploadifyQueueItem").length; var less = 5 - fileCount; if (less <= 0) { $("#a_upload").attr("href", "javascript:"); return false; } else { $("#a_upload").attr("href", "javascript:$('#uploadify').uploadifyUpload()"); return true; } }, }); }); function deleteFile(path) { $.ajax({ type: "post", url: "/UploadAction/UploadHandler.ashx", data: { operate: "deleteFile", file: path }, success: function (objdata) { $("#fileSave").html(objdata); fileCount = $("#fileSave>div.uploadifyQueueItem").length; var less = 5 - fileCount; if (less <= 0) { $("#a_upload").attr("href", "javascript:"); } else $("#a_upload").attr("href", "javascript:$('#uploadify').uploadifyUpload()"); } }); } </script> </body> </html>

后台的GetFile()方法:

/// <summary> /// 获取cookie附件信息 /// </summary> /// <returns></returns> protected string GetFile() { #region 获取cookie附件信息 StringBuilder strHtml = new StringBuilder(); HttpCookie fileCookie = Request.Cookies["FileCookie"]; if (fileCookie != null) { string[] fileArray = new string[1]; if (fileCookie.Value.Contains("|")) fileArray = fileCookie.Value.Split('|'); else fileArray[0] = fileCookie.Value; foreach (string objFile in fileArray) { if (!string.IsNullOrEmpty(objFile) && objFile.Contains(",")) { string[] file = objFile.Split(','); strHtml.Append(@"<div>"); strHtml.Append(@"<div>"); strHtml.Append("<a href='javascript:deleteFile(\"" + file[1] + "\")'></a>"); //strHtml.Append(@"<img src='https://www.jb51.net/Scripts/jquery.uploadify/cancel.png'>"); strHtml.Append(@"</div>"); strHtml.Append(@"<span>" + HttpUtility.UrlDecode(file[0]) + "</span><span> - 100%</span><div>"); strHtml.Append(@"<div>"); strHtml.Append(@"</div>"); strHtml.Append(@"</div>"); strHtml.Append(@"</div>"); } } } return strHtml.ToString(); #endregion }

3.UploadAction文件夹下的一般处理程序:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyfjs.html