jquery.MultiFile实现的多文件上传，只把待上传的文件名以列表展示在客户端并不上传的方法 .

jquery.MultiFile实现的多文件上传，只把待上传的文件名以列表展示在客户端并不上传的方法

       在做多文件上传时一直希望可以在客户端对待上传的文件进行控制，比如不可上传重复文件，可以对待上传的文件进行个数控制，文件类型控制，添加多个待上传文件之后以列表形式显示在客户端此时并没有直接保存在服务器等功能，为了实现这个功能在网上查找了一些控件，最后经同事推荐了jquery.MultiFile，然后就对该控件进行了详细研究   

 

下面直接上代码。

       首先要下载该控件（网上很多此处不再加链接），控件签入之后，引入下面这几个JS文件和CSS文件

 <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Resources/multiple-file-upload/documentation/documentation.js"
        type="text/javascript"></script>
    <link href="http://www.cnblogs.com/Resources/multiple-file-upload/documentation/documentation.css"
        rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.form.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.MetaData.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Resources/multiple-file-upload/jquery.MultiFile.js" type="text/javascript"></script>

$(function(){
 //修改上传文件时把已上传的文件以列表形式展示
            if ($("#filePath").val() != "") {
                var ele = $("#filePath").val().split(',');
                for (var i = 0; i < ele.length; i++) {
                    //列表前加删除功能，传过去要删除的文件路径，显示到列表上的是文件的文件名
                    if (ele[i] != "") {
                        if ($("#CommandType").val() == "look") {
                            $('#file-Log').append('<li style="list-style-type:none" >' + ele[i].substr(ele[i].lastIndexOf("\\") + 1) + '<a href="javascript:void(0)" onclick="loadFile(this)"  name="lihre" value="' + ele[i] + '">  下载</a></li>')
                        }
                        else
                        {
                            $('#file-Log').append('<li style="list-style-type:none" ><a href="#" onclick="delFile(this)"  name="lihre" value="' + ele[i] + '"> x </a>' + ele[i].substr(ele[i].lastIndexOf("\\") + 1) + '</li>')
                        }
                    }
                }

<PRE class=javascript name="code"> //上传文件操作
            $("#fileUpload").MultiFile({
                list: '#file-Log', //将文件列表展示在指定的ul中
                afterFileSelect: function (element, value, master_element) {
                    if ($("#filePath").val() != "") {
                        $("#filePath").val($("#filePath").val() + "," + value);
                    }
                    else {
                        $("#filePath").val(value);
                    }
                },
                afterFileRemove: function (element, value, master_element) {
                    var val = $("#filePath").val().replace(value, '');
                    $("#filePath").val(val);
                }
            })</PRE><BR>
})
<PRE></PRE>
<PRE class=html name="code"> //删除已经上传的文件data是上传的文件路径
        function delFile(data) {
            //查询到filePath中与要删除的文件一样的路径
            var val = $("#filePath").val().replace(data.value, '');
            $("#filePath").val(val);
            //删除父节点中的li
            $(data.parentNode).remove();
        }
        //下载文件
        function loadFile(data) {
            var path = escape(data.value);
            location.href = "AjaxHander.aspx?path="+path;
        }</PRE>
<P>html代码很简单只需要一个file控件就行，指定class就可以了</P>
<P>&nbsp;</P>
<PRE class=html name="code"></PRE><BR>
<BR>

由于是初次研究这个控件，很多地方还没有搞懂，只是把用到的几个地方研究了一下，希望大家多多研究，交流!