zoukankan      html  css  js  c++  java
  • 我的jquery.uploadifyv2.1.4 的使用。最后败给xheditor

    <%@ 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 },  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;
                 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;
                 100%;
            }
            #custom-demo .uploadifyProgressBar
            {
                background-color: #0099FF;
                height: 3px;
                 1px;
            }
            #custom-demo #customqueue
            {
                border: 1px solid #E5E5E5;
                height: 213px;
                margin-bottom: 10px;
                 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;  100%; margin: 0 auto">
            <table cellspacing="0" cellpadding="0" border="0" style="height: 100%;  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=" 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;
                }
            }
        }
    }
    
  • 相关阅读:
    移动端图片按比例裁剪
    bootstrap悬停下拉菜单显示
    videojs兼容ie8
    ie浏览器不支持多行隐藏显示省略号
    rem和px
    浏览器默认返回,页面刷新
    centos src compile gcc 7.3
    docker与gosu
    centos 安装 kernel
    docker proxy
  • 原文地址:https://www.cnblogs.com/mahaisong/p/2088098.html
Copyright © 2011-2022 走看看