檢查文件名發佈之前使用jquery/php

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>