我的jquery.uploadify-v2.1.4 的使用。最后败给xheditor
2011-06-23 14:35 沐海 阅读(2396) 评论(0) 编辑 收藏 举报<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TechSupport.aspx.cs" Inherits="Web.Cpanel.TechSupport.TechSupport" %> <!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 id="Head1" runat="server"> <title>Uploadify</title> <link href="http://www.cnblogs.com/js/jquery.uploadify-v2.1.4/uploadify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://www.cnblogs.com/js/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/js/jquery.uploadify-v2.1.4/swfobject.js"></script> <script type="text/javascript" src="http://www.cnblogs.com/js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script> <script src="http://www.cnblogs.com/js/common/validate.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/js/common/identity.js" type="text/javascript" charset="gb2312"></script> <link href="http://www.cnblogs.com/OpanelStyle/css/Style1.css" rel="stylesheet" type="text/css" /> <script src="http://www.cnblogs.com/js/xheditor1.0.0/xheditor-zh-cn.min.js" type="text/javascript"></script> <script type="text/javascript"> var myArray=new Array();//声明此数组来存放文件生成的路径 $(function() { $('#custom_file_upload').uploadify({ 'uploader': 'http://www.cnblogs.com/js/jquery.uploadify-v2.1.4/uploadify.swf', 'script': 'http://www.cnblogs.com/ComTool/UploadHandler.ashx', 'cancelImg': 'http://www.cnblogs.com/js/jquery.uploadify-v2.1.4/cancel.png', 'queueID': 'fileQueue', 'folder': 'http://www.cnblogs.com/upload/TechSupport', 'auto': false, 'multi': true, 'fileExt': '*.txt;*.rar;*.zip;*.jpg;*.jpeg;*.gif;*.png;*.swf;*.wmv;*.avi;*.wma;*.mp3;*.mid;*.doc;*.xls;*.ppt', 'fileDesc': 'Files', 'queueID': 'customqueue', 'queueSizeLimit':3, 'simUploadLimit': 3, 'removeCompleted' : false, 'onSelectOnce': function(event,data) { $('#status-message').text(data.filesSelected + ' 文件正在等待上传…….'); }, 'onComplete': function (evt, queueID, fileObj, response, data) {//onComplete表示文件上传成功事件调用函数 $('#files').append('<li>文件:' + (fileObj.name).substring((fileObj.name).lastIndexOf('/')) + '上传成功</li>'); //response 返回的数据 可以返回对应的JSON形式的所有的 已上传的文件的路径(存入SQL) alert("文件:" + fileObj.name + " 上传成功"); //名字是上传 的当前 的本机的文件名称 //alert(queueID);//所在位置 //被请求页面直接输出JSON格式字符串。用onComplete里的response获取。再用jQuery.parseJSON(response)格式化成JSON数据就可以啦。 alert(""+response);//调用传递回来的响应信息 myArray.push(response); $("#customqueue input").each(function(i){ this.val()=i; }); }, 'onAllComplete': function(event,data) { $('#status-message').text(data.filesUploaded + ' 文件上传完成!' + data.errors + '失误!'); }, 'onQueueFull': function(event,data) { alert("上传数目已满. 最多上传3个文件!"); }, 'onCancel': function(event,data) { //alert(data);//所在位置 var dd=$('#custom_file_upload'+data).find('.fileName').text(); var dd1=dd.substring(0,(dd).lastIndexOf(' ('))//所要删除的文件名称 这里注意(空格+‘(’)。有个空格字符 // var dd2="文件:"+dd1+"上传成功"; $("#files li").each(function(i){ if($(this).text().indexOf(dd1)>=0){ $(this).remove(); for(var i=0;i<myArray.length;i++){ if(myArray[i].indexOf(dd1)>=0){ for(var j=i;j<myArray.length-1;j++){ myArray[j]= myArray[j+1]; } myArray.pop(); } } } }); $('#status-message').text('选择上传的文件:'); },//清除一个的时候.对应的循序清楚数组中的,后面的向前赋值。 'onClearQueue': function(event,data) { $('#status-message').text('选择上传的文件:'); $("ul").empty(); myArray=null; }//清楚所有的时候 }); }); </script> <script type="text/javascript"> jQuery(pageInit); var editor; function pageInit() { editor = jQuery('#Contents').xheditor({ upLinkUrl: "http://www.cnblogs.com/ComTool/Upload.aspx", upLinkExt: "zip,rar,txt,doc,xls,ppt", upImgUrl: "http://www.cnblogs.com/ComTool/Upload.aspx", upImgExt: "jpg,jpeg,gif,png", onUpload: insertUpload }, { tools: 'full', skin: 'vista', shortcuts: { 'ctrl+enter': submitForm }, width: 810, height: 200, readonly: false }); } function insertUpload(msg) { } function submitForm() { jQuery('#form1').submit(); } </script> <style type="text/css"> #custom-demo .uploadifyQueueItem { background-color: #FFFFFF; border: none; border-bottom: 1px solid #E5E5E5; font: 11px Verdana, Geneva, sans-serif; height: 50px; margin-top: 0; padding: 10px; width: 350px; } #custom-demo .uploadifyError { background-color: #FDE5DD !important; border: none !important; border-bottom: 1px solid #FBCBBC !important; } #custom-demo .uploadifyQueueItem .cancel { float: right; } #custom-demo .uploadifyQueue .completed { color: #C5C5C5; } #custom-demo .uploadifyProgress { background-color: #E5E5E5; margin-top: 10px; width: 100%; } #custom-demo .uploadifyProgressBar { background-color: #0099FF; height: 3px; width: 1px; } #custom-demo #customqueue { border: 1px solid #E5E5E5; height: 213px; margin-bottom: 10px; width: 370px; } </style> <script src="TechSupport.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <input type="hidden" runat="server" id="oper" /> <input id="loadNewsType" type="hidden" runat="server" /> <div style="height: 590px; width: 100%; margin: 0 auto"> <table cellspacing="0" cellpadding="0" border="0" style="height: 100%; width: 95%;"> <tbody> <tr> <td class="maintd" valign="top"> <table width="95%" class="maintable" cellpadding="0" cellspacing="1" border="1"> <tr> <td class="title" colspan="4"> <label id="NewsInfo" runat="server"> </label> 新增技术支持(带<font class="nf1">*</font>为必填) </td> </tr> <td class="left" width="25%"> 上传附件:<br> 最多上传5个文件 </td> <td colspan="3"> <table> <tr> <td> <div id="custom-demo" style="margin-left: 60px"> <div id="uploadFile"> <div id="status-message"> 选择上传的文件:</div> <div id="customqueue"> </div> <input id="custom_file_upload" type="file" name="custom_file_upload" /> <p> <a href="javascript:$('#custom_file_upload').uploadifyUpload()">上传</a>| <a href="javascript:$('#custom_file_upload').uploadifyClearQueue()"> 取消上传</a> </p> </div> </div> </td> <td> <div> <ul id="files"> </ul> </div> </td> </tr> </table> </td> <tr> <td class="left" width="25%"> 标题: </td> <td colspan="3"> <input type="text" runat="server" id="Title" style="width: 400px; margin-left: 20px" maxlength="50" /><font color="red">*</font> </td> </tr> <tr> <td class="left" width="15%"> 技术类型: </td> <td class="right"> <select style="margin-left: 20px" id="TechType" name="TechType" runat="server"> </select> <font color="red">*</font> </td> <td class="left" width="15%"> 是否置顶: </td> <td class="right"> <input type="checkbox" id="checkboxValue" name="checkboxValue" runat="server" style="margin-left: 20px" /> </td> </tr> <tr> <td class="center" colspan="4"> <textarea rows="10" cols="70" id="Contents" name="Contents" class="dsn" runat="server"></textarea> <font color="red">*</font> </td> </tr> <tr> <td colspan="4" align="center" class="bottom" style="height: 34px"> <input type="button" id="btnSend" runat="server" value="提交" class="buttonBlue" onclick="Add()" /> <input type="button" id="btnReset" runat="server" value="重置" class="buttonBlue" onclick="resetValue()" /> </td> </tr> </table> </td> </tr> </tbody> </table> </div> </form> </body> </html>
function resetValue()//清空表单 { document.getElementById('Title').value=""; document.getElementById('checkboxValue').checked=false; document.getElementById('TechType').value='-1'; jQuery('#Contents').val("");//清空Textarea控件里面的值 } function checkForm()//表单提交时验证 { if (isNull("Title")) { alert("标题不能为空!"); document.getElementById("Title").focus(); return false; } if (document.getElementById('TechType').value=='-1') { alert("请选择技术类型!"); document.getElementById("TechType").focus(); return false; } if (jQuery('#Contents').val().replace("<p> </p>", "") == "") { alert("请输入内容!"); editor.focus(); return false; } return true; } function Add()//添加数据 { if (checkForm()) { var checkboxValue; var Address=""; var Title = document.getElementById('Title').value; var TechType = document.getElementById('TechType').value; var Content = jQuery('#Contents').val().replace("<p> </p>", ""); if(document.getElementById('checkboxValue').checked){ checkboxValue = 1;//选择了 true }else{ checkboxValue = 0;//未选择 false } for (var i in myArray) { var keyi = myArray[i]; if(i+1<myArray.length){ Address += keyi + "," ; } //遍历并添加 。 else{Address += keyi;} } var operationType = 2; $.ajax( { url: "TechSupportUtil.aspx", type: "POST", data: "operationType=" + operationType + "&Title=" + Title + "&TechType=" + TechType + "&Content=" + Content + "&checkboxValue=" + checkboxValue + "&Address=" + Address, dataType: 'json', timeout: 1000, error: function(data) { alert("出现错误!或者是您没有权限!"); }, success: function(data) { alert(data.result); } }); } else { return false; } }
败给xheditor了。唉。这个插件真好使。自己拼死拼活的,最后又难看,又不通用。还好有一点点的收获。
加油吧。有点泄气。
using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.IO; using System.Web.SessionState; namespace Web.ComTool { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class UploadHandler : IHttpHandler, IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"];//得到数据 string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";//得到路径 还需要创建日期文件夹。 // string upext = "txt,rar,zip,jpg,jpeg,gif,png,swf,wmv,avi,wma,mp3,mid,doc,xls,ppt"; // 上传扩展名 // string extension=GetFileExt(file.FileName); //if (("," + upext + ",").IndexOf("," + extension + ",") < 0) //{ // err = "上传文件扩展名必需为:" + upext; //} //else //{ if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } string result = uploadPath + file.FileName; file.SaveAs(result); //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失 //必须要有输出 作为 AJAX 的回调函数的参数。否则不响应 成功后的操作。 //一般用于传递 JSON数据,传递需要的当前文件的URL路径。用于数据库保存。 context.Response.Write(result); //} //else //{ // context.Response.Write("0"); //} } } public bool IsReusable { get { return false; } } ///// <summary> ///// 获取文件扩展名 ///// </summary> ///// <param name="FullPath">完整路径</param> ///// <returns></returns> //string GetFileExt(string FullPath) //{ // if (FullPath != "") // { // return FullPath.Substring(FullPath.LastIndexOf('.') + 1).ToLower(); // } // else // { // return ""; // } //} } }
using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.IO; using System.Web.SessionState; namespace Web.ComTool { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class DeleteUploadHandler : IHttpHandler, IRequiresSessionState { public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); string filePath = context.Server.UrlDecode(context.Request["address"].ToString()); //这里为了防止攻击。首先验证是否登录。再验证是否是指定文件夹下的文件。 if (filePath.LastIndexOf("\\") > 0)//传递参数正确 { string filename = filePath.Substring(filePath.LastIndexOf("\\")); //文件名 形式:(\\aa.txt) string fileroute = filePath.Substring(0, filePath.Length - filename.Length);//得到去除 filename之后的 字符 string Dir = string.Format("{0}{1} ", System.Web.HttpContext.Current.Server.MapPath("/. "), System.Web.HttpContext.Current.Request.ApplicationPath); //DIR 当前URL地址 F://wrok//waterMananger//code//web string Direction = Dir.Substring(0, Dir.Length - 2) + "upload\\TechSupport"; if (fileroute.Equals(Direction)) { if ((context.Session["AdminInfo"] != null)) { if (File.Exists(filePath)) { File.Delete(filePath); //删除指定文件 --对应操作(取消) } } } } } public bool IsReusable { get { return false; } } } }
本人声明:
个人主页:沐海(http://www.cnblogs.com/mahaisong)
以上文章都是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言或加我QQ!欢迎交流!