JQuery上传插件 Uploadify 的删除功能+基本原理和过程
2011-06-16 17:46 沐海 阅读(10701) 评论(6) 编辑 收藏 举报a(this).bind("uploadifySelect", {
action: f.onSelect,
queueID: f.queueID
},
function(k, i, j) {
if (k.data.action(k, i, j) !== false) {
var l = Math.round(j.size / 1024 * 100) * 0.01;
var m = "KB";
if (l > 1000) {
l = Math.round(l * 0.001 * 100) * 0.01;
m = "MB"
}
var n = l.toString().split(".");
if (n.length > 1) {
l = n[0] + "." + n[1].substr(0, 2)
} else {
l = n[0]
}
if (j.name.length > 20) {
fileName = j.name.substr(0, 20) + "..."
} else {
fileName = j.name
}
queue = "#" + a(this).attr("id") + "Queue";
if (k.data.queueID) {
queue = "#" + k.data.queueID
}
a(queue).append('<div id="' + a(this).attr("id") + i + '" class="uploadifyQueueItem"><div class="cancel"><a href="javascript:jQuery(\'#' + a(this).attr("id") + "').uploadifyCancel('" + i + '\')"><img src="' + f.cancelImg + '" border="0" /><input type="hidden"/></a></div><span class="fileName">' + fileName + " (" + l + m + ')</span><span class="percentage"></span><div class="uploadifyProgress"><div id="' + a(this).attr("id") + i + 'ProgressBar" class="uploadifyProgressBar"><!--Progress Bar--></div></div></div>')
}
});
a(this).bind("uploadifySelectOnce", {
action: f.onSelectOnce
},
function(i, j) {
i.data.action(i, j);
if (f.auto) {
if (f.checkScript) {
a(this).uploadifyUpload(null, false)
} else {
a(this).uploadifyUpload(null, true)
}
}
});
a(this).bind("uploadifyQueueFull", {
action: f.onQueueFull
},
function(i, j) {
if (i.data.action(i, j) !== false) {
// alert("The queue is full. The max size is " + j + ".")
}
});
a(this).bind("uploadifyCheckExist", {
action: f.onCheck
},
function(n, m, l, k, p) {
var j = new Object();
j = l;
j.folder = (k.substr(0, 1) == "/") ? k: e + k;
if (p) {
for (var i in l) {
var o = i
}
}
a.post(m, j,
function(s) {
for (var q in s) {
if (n.data.action(n, s, q) !== false) {
var r = confirm("Do you want to replace the file " + s[q] + "?");
if (!r) {
document.getElementById(a(n.target).attr("id") + "Uploader").cancelFileUpload(q, true, true)
}
}
}
if (p) {
document.getElementById(a(n.target).attr("id") + "Uploader").startFileUpload(o, true)
} else {
document.getElementById(a(n.target).attr("id") + "Uploader").startFileUpload(null, true)
}
},
"json")
});
a(this).bind("uploadifyCancel", {
action: f.onCancel
},
function(n, j, m, o, i, l) {
if (n.data.action(n, j, m, o, l) !== false) {
if (i) {
var k = (l == true) ? 0 : 250;
/*这里写POST AJAX操作*/
var tempfile=a("#" + a(this).attr("id") + j).find("input").val();
if(tempfile!=null&&tempfile!=""){
jQuery.post("http://www.cnblogs.com/ComTool/DeleteUploadHandler.ashx?address="+tempfile);
}
a("#" + a(this).attr("id") + j).fadeOut(k,
function() {
a(this).remove()
})
}
}
});
a(this).bind("uploadifyClearQueue", {
action: f.onClearQueue
},
function(k, j) {
var i = (f.queueID) ? f.queueID: a(this).attr("id") + "Queue";
if (j) {
a("#" + i).find(".uploadifyQueueItem").remove()
}
if (k.data.action(k, j) !== false) {
a("#" + i).find(".uploadifyQueueItem").each(function() {
/*这里写POST AJAX操作*/
/*这里写POST AJAX操作*/
var tempfile1=a(this).find("input").val();
if(tempfile1!=null&&tempfile1!=""){
jQuery.post("http://www.cnblogs.com/ComTool/DeleteUploadHandler.ashx?address="+tempfile1);
}
var l = a(".uploadifyQueueItem").index(this);
a(this).delay(l * 100).fadeOut(250,
function() {
a(this).remove()
})
})
}
});
var c = [];
a(this).bind("uploadifyError", {
action: f.onError
},
function(m, i, l, k) {
if (m.data.action(m, i, l, k) !== false) {
var j = new Array(i, l, k);
c.push(j);
a("#" + a(this).attr("id") + i).find(".percentage").text(" - " + k.type + " Error");
a("#" + a(this).attr("id") + i).find(".uploadifyProgress").hide();
a("#" + a(this).attr("id") + i).addClass("uploadifyError")
}
});
if (typeof(f.onUpload) == "function") {
a(this).bind("uploadifyUpload", f.onUpload)
}
a(this).bind("uploadifyProgress", {
action: f.onProgress,
toDisplay: f.displayData
},
function(k, i, j, l) {
if (k.data.action(k, i, j, l) !== false) {
a("#" + a(this).attr("id") + i + "ProgressBar").animate({
width: l.percentage + "%"
},
250,
function() {
if (l.percentage == 100) {
a(this).closest(".uploadifyProgress").fadeOut(250,
function() {
a(this).remove()
})
}
});
if (k.data.toDisplay == "percentage") {
displayData = " - " + l.percentage + "%"
}
if (k.data.toDisplay == "speed") {
displayData = " - " + l.speed + "KB/s"
}
if (k.data.toDisplay == null) {
displayData = " "
}
a("#" + a(this).attr("id") + i).find(".percentage").text(displayData)
}
});
a(this).bind("uploadifyComplete", {
action: f.onComplete
},
function(l, i, k, j, m) {
if (l.data.action(l, i, k, unescape(j), m) !== false) {
a("#" + a(this).attr("id") + i).find(".percentage").text(" - Completed");
//先执行前台的方法。再执行此方法。
//j:是后台处理传过来的Utf-8的需要解码的数据.(可以绑定URL文件路径)
a("#" + a(this).attr("id") + i).find("input").val(unescape(j).toString());
if (f.removeCompleted) {
a("#" + a(l.target).attr("id") + i).fadeOut(250,
function() {
a(this).remove()
})
}
a("#" + a(l.target).attr("id") + i).addClass("completed")
}
});
if (typeof(f.onAllComplete) == "function") {
a(this).bind("uploadifyAllComplete", {
action: f.onAllComplete
},
function(i, j) {
if (i.data.action(i, j) !== false) {
c = []
}
})
}
})
},
jquery.uploadify.v2.1.4.min.js
jquery.1.4.min.js
前台
1.首次加载时。
jquery.uploadify.v2.1.4.min.js
会进行插件绑定到JQUery
if (jQuery) { (function(a) {
a.extend(a.fn, {
uploadify: function(b) {//绑定上。到这里。但是具体的函数不执行。因为只有调用时才执行。
2.然后进入到Jquery 进行一些插件机制。(jquery.1.4.min.js)
3.到前台中
$(function() {//执行者一句。进行JQUERY和$对象进行初始化。完了之后,不执行里面的函数。直接跳到完成的括号。
$('#custom_file_upload').uploadify({
4.再回来执行
$(function() {
$('#custom_file_upload').uploadify({//这一句。 开始调用
5.根据uploadify和$来找到插件即jquery.uploadify.v2.1.4.min.js文件
执行具体的调用
if (jQuery) { (function(a) {
a.extend(a.fn, {
uploadify: function(b) {//开始调用此方法。
a(this).each(function() {
var f = a.extend({
id: a(this).attr("id"),
uploader: "uploadify.swf",
script: "uploadify.php",
expressInstall: null,
folder: "",
height: 30,
width: 120,
cancelImg: "cancel.png",
wmode: "opaque
wmode: "opaque",
scriptAccess: "sameDomain",
fileDataName: "Filedata",
method: "POST",
queueSizeLimit: 999,
simUploadLimit: 1,
queueID: false,
displayData: "percentage",
removeCompleted: true,
onInit: function() {},
onSelect: function() {},
onSelectOnce: function() {},
onQueueFull: function() {},
onCheck: function() {},
onCancel: function() {},
onClearQueue: function() {},
onError: function() {},
onProgress: function() {},
onComplete: function() {},
onAllComplete: function() {}
},
b);
6.此方法中有一些会调用sObject.js去调用SWF的Flash文件去形成图像。(初始化+有操作响应界面变化的阶段)
7.具体执行。
具体执行时,首先响应 前台中有关于程序员定义的有关属性。再响应jquery.uploadify.v2.1.4.min.js文件中绑定的事件的执行处理。
前台写时。基础上面的那个uploadify函数中的属性+方法。并实现具体需要的操作。
EXP:
<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':5,
'simUploadLimit': 5,
'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 + " 上传成功"); //名字是上传 的当前 的本机的文件名称
//被请求页面直接输出JSON格式字符串。用onComplete里的response获取。再用jQuery.parseJSON(response)格式化成JSON数据就可以啦。
alert(""+response);//调用传递回来的响应信息
// if(myArray.length>0){
// myArray[myArray.length]=response;
// $("#customqueue input:eq("+length+")").val()=response;
// alert(""+$("#customqueue input:eq("+length+")").val());
// }else{
// myArray[0]=response;}
// $("#customqueue input:eq(0)").val()=response;
// // alert(""+$("#customqueue input:eq(0)").val());
// }
// $("#customqueue input").each(function(i){
// this.val()=i;
// });
///1。js中使用uploadify方法,先写好参数 点击上传后 由指定的PHP页面去处理
//2。PHP接收$_FILE 分配目录,重命名文件,copy到目录中,图片的话可以做些处理做各种裁图缩图,把文件信息信息写入附件表
//得到插入的id,然后echo 一个json数组,数组中有文件路径,文件id等,如果PHP版本小于5.2就要echo字符串了。
//3。’onComplete’ : function(event,queueID,fileObj,response,data){})
//使用uploadify onComplete 参数 处理json数据 或字符串 把数据写进各种标签中,包括div,img,a,select,input 等.每个文件onComplete都append这些。
//4。写一些Js操作,比如删除,插入文本域如fck,设封面图等
//5。点击提交后会把附件的ID,用隐藏域数组方式发给php,封面图片地址也隐藏域发上去。由php处理这个文章信息,及附带的附件文件,最后入库。把插入的文章的id及附件id写入关联表,并更新附件表中附件ID的使用信息。
//6。编辑文章时,从关联表中取出附件id,遍历附件信息。传新附件时和上面一样。
//7。删除无用附件时,直接删除附件表中使用信息没有的附件就可以了。
//如果要对每个附件也写描述并排序等。就需要多写一些input text标签,提交时数组提交上去,PHP拿到数据后写入表中。
//最后提示table 要写在 form 中…..
},
'onAllComplete': function(event,data) {
$('#status-message').text(data.filesUploaded + ' 文件上传完成!' + data.errors + '失误!');
},
'onQueueFull': function(event,data) {
alert("上传数目已满. 最多上传5个文件!");
}
// onCancel: function(event,data) {
//
// myArray.length=0;alert("1");
//
// },//清除一个的时候.对应的循序清楚数组中的,后面的向前赋值。
// onClearQueue: function(event,data) {myArray.length=0;alert("2");}//清楚所有的时候
});
});
</script>
到这里都是使用说明。
下面是一些。我自己修改的地方。用于后台具体的根据上传做操作它已经封装好了。但是有关删除的操作这个插件根本没有做。不过它留了接口。所有我根据接口修改了一下。根据需求。
小二。上代码
a(this).bind("uploadifyCancel", {
action: f.onCancel
},
function(n, j, m, o, i, l) {
if (n.data.action(n, j, m, o, l) !== false) {
if (i) {
var k = (l == true) ? 0 : 250;
/*这里写POST AJAX操作*/
var tempfile=a("#" + a(this).attr("id") + j).find("input").val();
if(tempfile!=null&&tempfile!=""){
jQuery.post("http://www.cnblogs.com/ComTool/DeleteUploadHandler.ashx?address="+tempfile);
}
a("#" + a(this).attr("id") + j).fadeOut(k,
function() {
a(this).remove()
})
}
}
});
a(this).bind("uploadifyClearQueue", {
action: f.onClearQueue
},
function(k, j) {
var i = (f.queueID) ? f.queueID: a(this).attr("id") + "Queue";
if (j) {
a("#" + i).find(".uploadifyQueueItem").remove()
}
if (k.data.action(k, j) !== false) {
a("#" + i).find(".uploadifyQueueItem").each(function() {
/*这里写POST AJAX操作*/
/*这里写POST AJAX操作*/
var tempfile1=a(this).find("input").val();
if(tempfile1!=null&&tempfile1!=""){
jQuery.post("http://www.cnblogs.com/ComTool/DeleteUploadHandler.ashx?address="+tempfile1);
}
var l = a(".uploadifyQueueItem").index(this);
a(this).delay(l * 100).fadeOut(250,
function() {
a(this).remove()
})
})
}
});
var c = [];
a(this).bind("uploadifyError", {
action: f.onError
},
function(m, i, l, k) {
if (m.data.action(m, i, l, k) !== false) {
var j = new Array(i, l, k);
c.push(j);
a("#" + a(this).attr("id") + i).find(".percentage").text(" - " + k.type + " Error");
a("#" + a(this).attr("id") + i).find(".uploadifyProgress").hide();
a("#" + a(this).attr("id") + i).addClass("uploadifyError")
}
});
if (typeof(f.onUpload) == "function") {
a(this).bind("uploadifyUpload", f.onUpload)
}
a(this).bind("uploadifyProgress", {
action: f.onProgress,
toDisplay: f.displayData
},
function(k, i, j, l) {
if (k.data.action(k, i, j, l) !== false) {
a("#" + a(this).attr("id") + i + "ProgressBar").animate({
width: l.percentage + "%"
},
250,
function() {
if (l.percentage == 100) {
a(this).closest(".uploadifyProgress").fadeOut(250,
function() {
a(this).remove()
})
}
});
if (k.data.toDisplay == "percentage") {
displayData = " - " + l.percentage + "%"
}
if (k.data.toDisplay == "speed") {
displayData = " - " + l.speed + "KB/s"
}
if (k.data.toDisplay == null) {
displayData = " "
}
a("#" + a(this).attr("id") + i).find(".percentage").text(displayData)
}
});
a(this).bind("uploadifyComplete", {
action: f.onComplete
},
function(l, i, k, j, m) {
if (l.data.action(l, i, k, unescape(j), m) !== false) {
a("#" + a(this).attr("id") + i).find(".percentage").text(" - Completed");
//先执行前台的方法。再执行此方法。
//j:是后台处理传过来的Utf-8的需要解码的数据.(可以绑定URL文件路径)
a("#" + a(this).attr("id") + i).find("input").val(unescape(j).toString());
if (f.removeCompleted) {
a("#" + a(l.target).attr("id") + i).fadeOut(250,
function() {
a(this).remove()
})
}
a("#" + a(l.target).attr("id") + i).addClass("completed")
}
});
if (typeof(f.onAllComplete) == "function") {
a(this).bind("uploadifyAllComplete", {
action: f.onAllComplete
},
function(i, j) {
if (i.data.action(i, j) !== false) {
c = []
}
})
}
})
},
前台页面
<!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/example/css/default.css" rel="stylesheet" type="text/css" />
<link href="http://www.cnblogs.com/js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
<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 type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify(
{'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf', 'script': 'UploadHandler.ashx','cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png', 'folder': 'UploadFile','queueID': 'fileQueue','auto': false,'multi': true}
//
);
});</script>--%>
<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 type="text/javascript">
$(document).ready(function() {
$('#fileQueue').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',
'auto': true
});
});--%>
<%--</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':5,
'simUploadLimit': 5,
'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 + " 上传成功"); //名字是上传 的当前 的本机的文件名称
//被请求页面直接输出JSON格式字符串。用onComplete里的response获取。再用jQuery.parseJSON(response)格式化成JSON数据就可以啦。
alert(""+response);//调用传递回来的响应信息
// if(myArray.length>0){
// myArray[myArray.length]=response;
// $("#customqueue input:eq("+length+")").val()=response;
// alert(""+$("#customqueue input:eq("+length+")").val());
// }else{
// myArray[0]=response;}
// $("#customqueue input:eq(0)").val()=response;
// // alert(""+$("#customqueue input:eq(0)").val());
// }
// $("#customqueue input").each(function(i){
// this.val()=i;
// });
///1。js中使用uploadify方法,先写好参数 点击上传后 由指定的PHP页面去处理
//2。PHP接收$_FILE 分配目录,重命名文件,copy到目录中,图片的话可以做些处理做各种裁图缩图,把文件信息信息写入附件表
//得到插入的id,然后echo 一个json数组,数组中有文件路径,文件id等,如果PHP版本小于5.2就要echo字符串了。
//3。’onComplete’ : function(event,queueID,fileObj,response,data){})
//使用uploadify onComplete 参数 处理json数据 或字符串 把数据写进各种标签中,包括div,img,a,select,input 等.每个文件onComplete都append这些。
//4。写一些Js操作,比如删除,插入文本域如fck,设封面图等
//5。点击提交后会把附件的ID,用隐藏域数组方式发给php,封面图片地址也隐藏域发上去。由php处理这个文章信息,及附带的附件文件,最后入库。把插入的文章的id及附件id写入关联表,并更新附件表中附件ID的使用信息。
//6。编辑文章时,从关联表中取出附件id,遍历附件信息。传新附件时和上面一样。
//7。删除无用附件时,直接删除附件表中使用信息没有的附件就可以了。
//如果要对每个附件也写描述并排序等。就需要多写一些input text标签,提交时数组提交上去,PHP拿到数据后写入表中。
//最后提示table 要写在 form 中…..
},
'onAllComplete': function(event,data) {
$('#status-message').text(data.filesUploaded + ' 文件上传完成!' + data.errors + '失误!');
},
'onQueueFull': function(event,data) {
alert("上传数目已满. 最多上传5个文件!");
}
// onCancel: function(event,data) {
//
// myArray.length=0;alert("1");
//
// },//清除一个的时候.对应的循序清楚数组中的,后面的向前赋值。
// onClearQueue: function(event,data) {myArray.length=0;alert("2");}//清楚所有的时候
});
});
</script>
</head>
<body>
<ul id="files"></ul>
<div id="custom-demo">
<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>
<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>
</body>
</html>
后台
添加
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 ((context.Session["AdminInfo"] != 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");
}
//}
//else
//{
// context.Response.Write("0");
//}
}
}
后台 删除
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());
//这里为了防止攻击。首先验证是否登录。再验证是否是指定文件夹下的文件。
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); //删除指定文件 --对应操作(取消)
}
}
}
}