zoukankan      html  css  js  c++  java
  • 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);  //删除指定文件  --对应操作(取消)
                    }
     
                  
     
                }
                }
            }
  • 相关阅读:
    LOJ#3157. 「NOI2019」机器人 DP+拉格朗日插值
    BZOJ4832 [Lydsy2017年4月月赛]抵制克苏恩 记忆化搜索
    LazySysAdmin 靶机渗透
    zico2靶机渗透
    6_面向对象-下之关键字:static
    5_面向对象-中之单元测试方法、包装类的使用
    5_面向对象-中之Object类的使用
    5_面向对象-中之面向对象的特征三:多态性
    5_面向对象-中之子类对象实例化全过程
    5_面向对象-中之关键字:super
  • 原文地址:https://www.cnblogs.com/mahaisong/p/2082943.html
Copyright © 2011-2022 走看看