test.html

<script type="text/javascript" src="Public/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">

    //限制文件数

    var mflFileMaxCount = 5;

    var mflFileCount = 0;

    //限制文件类型

    var mflCouldUserTypes = "|.jpeg|.jpg|.gif|.png|.bmp|";

   

    function AddFile(obj) {

        var fileName = obj.value;

        if (mflFileCount >= mflFileMaxCount) {

            window.alert("信息提示：系统设置，最多只能同时上传[" + mflFileMaxCount + "]个文件.");

            return;

        }

       

        if ($.trim(fileName) == "") {

            //用户没有选择文件

            return;

        }

       

        if($("#hdFileName").attr("value").length>1)

        {

            var arr = $("#hdFileName").attr("value").split(",");

            for(var i=0; i<arr.length;i++)

            {

                if(arr[i]==fileName){

                   window.alert("该文件已经存在任务列表中！");

                   return;

}

            }

        }

        $("#hdFileName").val($("#hdFileName").attr("value")+","+fileName);

       

        var type = fileName.substring(fileName.lastIndexOf("."));

        type = type.toLowerCase();  //将字符串换成小写

        var sFileName = fileName.substring(fileName.lastIndexOf("\\"));

        var newFileLoadTmp = "<input type='file' name='mflFileUpload" + (mflFileCount + 1) + "' id='mflFileUpload" + (mflFileCount + 1) + "' onchange='AddFile(this)' class='mflFileUploadCss' />"

        var newLiFile = "<li><span class='FileNameStyle'>" + sFileName + "</span>&nbsp;<img src='http://blog.163.com/thylx133@126/blog/../images/ac_02.jpg' onclick='mflRemoveFile(this)' /></li>";       

        if ($.trim(type) == "" || $.trim(sFileName) == "") {

            //用户没有选择文件

            return;

        }

        if (mflCouldUserTypes.indexOf("|" + type + "|") != -1) {

            $(obj).css("display","none");

            $(".mflLeft_FileUpload").append(newFileLoadTmp);

            $(".mflRightOlFiles").append(newLiFile);

            mflFileCount += 1;

            $(".mflFileCountMsg").html("已选文件数："+mflFileCount);

        }

        else {

            window.alert("信息提示：文件类型不正确。");

        }

    }

 

    function mflRemoveFile(obj) {

        if (confirm("信息提示：确定移除该文件？")) {

            var innerHtml = $(obj).parent().html();

            var itemIndex = 0;

            for (itemIndex = 0; itemIndex < $(".mflRightOlFiles li").length; itemIndex++) {

                if ($(".mflRightOlFiles li").eq(itemIndex).html() == innerHtml) {

                    break;

                }

            }

 

            $(".mflRightOlFiles li").eq(itemIndex).remove();

            $(".mflLeft_FileUpload input").eq(itemIndex).remove();

            mflFileCount -= 1;

            $(".mflFileCountMsg").html("已选文件数：" + mflFileCount);

        }

    }

</script>
<style type="text/css">
	.mflFileUploadCss { width:83px; filter:alpha(opacity=0); opacity:0; }

	.mflLeft_FileUpload{ background-image:url("../images/btn_look.jpg"); width:83px; overflow:hidden; }

	.mflLeft_AddFileUpload { background-image:url("../images/btn_addPic.jpg"); }

	.mflRightOlFiles{ padding-left:5px;}
</style>



<div class="mflLeft_FileUpload" style="float:left;">

<asp:FileUpload ID="FileUpload1" onchange="AddFile(this)" CssClass="mflFileUploadCss" runat="server" /> </div>&nbsp;&nbsp;(文件类型：jpeg ; jpg ; gif ; png:bmp)

<ul class="mflRightOlFiles">

</ul>

<span class="mflFileCountMsg"></span>