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

有了这个简单的例子隐藏上传提交按钮，如果字段“文件”是空的

<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

感谢

来源

2012-03-09 Warface

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

来源

2012-03-09 14:25:52

应该在开始时禁用提交按钮？ – Warface 2012-03-09 14:36:21

@Warface是的，这可以通过在提交按钮中添加“禁用”来完成。 – 2012-03-09 14:37:16

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

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

来源

2012-03-09 14:28:19 Starx

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

来源

2012-03-09 14:31:59 BnW

<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>

来源

2012-03-09 14:32:10

'ActiveXObject'是一个专有的Micro $ oft浏览器扩展。此代码只能*有时*在（旧版本）IE中工作。另外，'getElementById'是一个函数，而不是一个属性。使用parens代替括号。 – 2012-03-09 14:35:06

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

回答

相关问题