我的jquery.uploadify-v2.1.4 的使用。最后败给xheditor
2011-06-23 14:35
507 查看
<%@ 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;
}
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- jQuery Uploadify上传插件使用中的问题 中文字符文件名转英文
- ASP.NET配置jquery.uploadify-v2.1.4
- 使用Jquery uploadify上传文件
- jQuery Uploadify在ASP.NET MVC中的使用
- Jquery.Uploadify 上传文件插件的使用
- jquery.uploadify 使用过程
- jQuery Uploadify在ASP.NET MVC3中的使用
- jquery.uploadify的使用
- ASP.NET MVC 使用Jquery Uploadify 在非IE浏览器下Http Error的解决方案
- 使用jQuery Uploadify在ASP.NET 上传附件
- JQuery uploadify 的使用
- 开源jquery.uploadify 在 遨游 maxthon 下不能正常使用的 bug
- ASP.NET MVC 使用Jquery Uploadify 在非IE浏览器下Http Error的解决方案
- jquery.uploadify上传插件HTML5版中文api使用说明
- JQuery uploadify上传组件的使用方法
- 使用jQuery Uploadify借助Dorado平台实现批量上传文件动态显示实时上传文件状态
- 详解jQuery uploadify文件上传插件的使用方法
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- Jquery uploadify上传插件使用详解