我的上传组件-开始干活啦----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>