如果字段“”，则隐藏上传提交按钮;文件“;是空的

Hide the upload submit button if field "file" is empty

本文关键字：按钮 文件 提交 字段 如果 隐藏      更新时间：2023-09-26

用这个简单的例子

<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

感谢

<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. */
});

使用这个。将代码附加到文件字段的change事件上。

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

提交的默认状态应该是隐藏的（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>

<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>
相关文章：