我的上传组件-开始干活啦----2表单页面upload.jsp

 

upload.jsp

提供上传多个文件的功能,默认显示一个表单，需要单击后添加file表单

提供删除file表单，保留一个

 

<script type="text/javascript"
    src="/scripts/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
    var i = 0;
    $( function() {
        into();
        //点击添加表单按钮
        $('#add_file').click(function() {
                            addInputTr();
                        });

//提交按钮单击了
        $("#sub_btn").click(function(){
            if(getInputValue()=="")
                alert("请选择上传的文件!");
            else
                document.forms['uploae_sp'].submit();
        });

    });

    //添加上传表单
    addInputTr = function(){
        i = i + 1;
        var node = $("#src_node");
        //alert(tr_h + " " + i);
        var new_id = "file_tr" + i;

       //添加表单，并且设置表单上级ID，主要为了方便删除此节点

       var new_html = '<div class="file_tr" id="' + new_id + '"><input type="file" name="upload" size="38" class="upload_input" /><input type="button" class="del"></div>';
        $("#src_node").append(new_html).find("div > .del").attr("onclick",
                "del_tr(" + new_id + ")").click(function(){$(this).parent().remove();//删除此节点
        });
    }

    //取上传表单值,允许多数为空，但不能全空
    getInputValue = function(){
            var inputVal = "";
            var inputNode = $(".upload_input");
            $(inputNode).each( function() {
                if($(this).val()!=""){
                    //alert($(this).val());
                    inputVal += $(this).val() + ",";
                }
            });
            return inputVal;
        }
    //初始化上传保存的路径等，参数
    into = function() {

        //取上级页面的status(多传开关)参数

        var status = window.parent.status;
        //alert(status);
        if(status==0){
            $("#add_file").hide();
        }

        //取上级页面的保存路径参数
        var savePath = window.parent.savePath;

        //取上级页面的文件类型参数
        var byType = window.parent.byType;

        //插入到表单中
        document.getElementById("byType").value = byType;
        document.getElementById("savePath").value = savePath;
    }

</script>
<form action="/upload.action" method="post" enctype="multipart/form-data" name="uploae_sp">
    <div id="file_tr" class="file_tr">
        <input type="file" name="upload" size="38" class="upload_input" />
    </div>
    <div id="src_node">
    </div>
    <div id="sub_tr">

       <!--此处多余，-->
        <input type="text" name="token" id="token" value="<%=Token.getTokenString(session)%>">

        <!--上传保存的位置，-->       

        <input type="text" name="savePath" id="savePath">

        <!--上传允许的类型，这个做法有点危险-再完善-->

        <input type="text" name="byType" id="byType"><br>
        <input type="button" value="添加更多…" id="add_file">
        <input type="button" value="上传" id="sub_btn">
    </div>
</form>