Question

我需要jquery来检查我发布的文件名（up_image）是否为空。

如果它是空的，我需要显示一个div标签，并带有某种警报信息。

如果没有，只需执行

$("#submit").submit();

    <form action="/profile/" method="post" enctype="multipart/form-data" id="submit">
    <p>
        <label for="up_image">image:</label>
        <input type="file" name="up_image" id="up_image" />     
    </p>
    <a href="javascript:;" id="post_submit" class="submit_btn">Upload</a>
</form>

Answer 1

$(function() {
  $("#post_submit").click(function() {
    var fil = $("#up_image");
    if($.trim(fil.val()).length == 0) {
      alert("Choose a file!");
      fil.focus();
      return false;
    }

    $("#submit").submit();
  });
});

Answer 2

1：出于可访问性原因，使用标准提交按钮提交表单而不是依赖于javascript的链接，并且如果有人试图右键单击 - 在新窗口中打开或其他类似操作，则防止破坏链接。如果你想让它看起来像一个链接，你仍然可以使用一个按钮，只需应用一些CSS使它不再像一个按钮。

2：使用form.onsubmit事件进行验证而不是依赖于提交按钮单击（也可以通过按Enter键提交表单，这可能不会总是生成按钮点击）

<form id="uploadform" method="post" action="/profile/" enctype="multipart/form-data">
    <p>
        <label for="up_image">image:</label>
        <input id="up_image" type="file" name="up_image" />
    </p>
    <p>
        <input type="submit" value="Upload" />
    </p>
</form>
<script type="text/javascript">
    $('#uploadform').submit(function(e) {
        if ($('#up_image').val()=='') {
            alert('Please choose a file to upload.');
            e.preventDefault();
        }
    });
</script>

在使用jquery / php发布之前检查文件名

2 个答案: