Question

用这个简单的例子

<form action="" method="post" enctype="multipart/form-data">
            Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
        </form>

我怎样才能隐藏提交按钮，直到文件字段中的某些内容为止，我试图创建一个php脚本，看看$ _FILES ['error'] == 4或is_file_uploaded等，哪些不起作用。所以我想简单地隐藏按钮，直到在文件字段中选择了某些内容。

答案可能是javascript，jQuery ......我不在乎：D

由于

Answer 1

<input type="file">元素具有files属性。

只需检查files.length。

jQuery示例，它可以动态修改提交按钮：

// Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
    var hasNoFiles = this.files.length == 0;
    $(this).closest('form') /* Select the form element */
       .find('input[type=submit]') /* Get the submit button */
       .prop('disabled', hasNoFiles); /* Disable the button. */
});

Answer 2

使用它。将代码附加到文件字段的change事件中。

  $(function() {
     $("input:file").change(function() {
       var fileName = $(this).val();
       if(filename != "") { $("#submitButtonId").show(); } //show the button
     });
  });

Answer 3

应隐藏提交的默认状态（CSS display: none）在文件字段的更改事件中，您将显示提交按钮

她是代码

<script>
$(function() {
  $("#myfileinput").change(function() {
    if($(this)).val() != "") $("submit").show();
  });
});
</script/>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input id="myfileinput" type="file" name="images[]" multiple="multiple">
<input type="submit" name="submitImgs" value="Upload" style="display:none"/>
</form>

Answer 4

<script>
function checkFile() {
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    if(size > 0) {
        document.getElementById('submit').style.display='block';
    }
}
</script>
<form action="" method="post" enctype="multipart/form-data">
            Upload images: <input type="file" onChange="checkFile()" name="images[]" multiple="multiple"> <input type="submit" style="display:none;" name="submitImgs" value="Upload" id="submit" />
</form>

如果字段“file”为空，则隐藏上传提交按钮

4 个答案: