javascript - 单击按钮时如何显示 div 标签？

Question

我的程序是上传一个文件，当我点击Upload时，它会调用一个 servlet。相同的上传页面包含一些其他字段，当我单击上传按钮时应该显示这些字段。如何调用 servlet 以及显示剩余内容。实际上使用 servlet 我想在同一页面上显示文件内容。

这是我的代码。

<form class="form-horizontal" name="regist" action="Registration"
            onsubmit="return validateFile((this))" enctype="multipart/form-data"
            method="post">

            <div class="control-group" class="span12">
                <label class="control-label" for="file">Please upload a
                    file:</label>
                <div class="controls">
                    <input type="file" name="file"/>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn btn-primary">Upload</button>
                </div>
            </div>
        </form>
    </div>

<div id="showFrames" style="display:none;">

<!--
  hidden contents are here -->

</div>

我的脚本是

function validateFile(form) {
        var fileName = form.file.value;
        if (!fileName) {
            alert("No File Selected!!!");
            return false;
        }
        else
        {
            $("#showFrames").show();
        }
    }

但它不起作用。谁能帮我？谢谢

Answer 1

Replace your as per below
  <form class="form-horizontal" name="regist" action="Registration"
        onsubmit="return validateFile(this)" enctype="multipart/form-data"
        method="post">

        <div class="control-group" class="span12">
            <label class="control-label" for="file">Please upload a
                file:</label>
            <div class="controls">
                <input type="file" name="file"/>
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <button type="submit" class="btn btn-primary">Upload</button>
            </div>
        </div>
    </form>
</div>

Answer 2

使用 jQuery，我会这样做：

$('.form-horizontal').sumbit(function(e) {
    if($(this).find('input[type="file"]').val().length) { //check by length
        $("#showFrames").show();
    } else {
        alert('No file Selected');
        e.preventDefault();
    }
});

如果您需要多个表单，最好使用表单 ID。

这样您就可以删除该onsubmit属性。