JQuery上传插件 Uploadify 的删除功能+基本原理和过程

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({
                                 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,
                        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({
                                 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;
                 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>
        <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);  //删除指定文件  --对应操作(取消)
                }
 
              
 
            }
            }
        }
原文地址:https://www.cnblogs.com/mahaisong/p/2082943.html