我的jquery.uploadify-v2.1.4 的使用。最后败给xheditor

2011-06-23 14:35 沐海阅读(2404) 评论(0) 编辑收藏举报

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

<%@ 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;
            }
        }
    }
}

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述

沐海—化茧成蝶一只井底之蛙，你什么时候才能真正的向自己的脚下一点点的垫石头。而不是以为天下只有井口那么大。