Menu
Is it possible to determine if the user has selected a file for a particular input type="file" field using javascript/jQuery?
I have developed a custom fieldtype for ExpressionEngine (PHP-based CMS) that lets users upload and store their files on Amazon S3, but the most popular EE hosting service has set a max_file_uploads limit of 20. I'd like to allow the user to upload 20 files, edit the entry again to add 20 more, etc. Unfortunately upon editing the entry the initial 20 files have a "replace this image" file input field that appears to be knocking out the possibility of uploading new images. I'd like to remove any unused file input fields via javascript when the form is submitted.
992
Yes - you can read the value and even bind to the change event if you want.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$('#tester').change( function()
{
console.log( $(this).val() );
});
});
</script>
</head>
<body>
<input type="file" id="tester" />
</body>
</html>
But there are other, multiple-upload solutions that might suit your needs better, such as bpeterson76 posted.
79
This code will remove all the empty file inputs from the form and then submit it:
HTML:
<form action="#">
<input type="file" name="file1" /><br />
<input type="file" name="file2" /><br />
<input type="file" name="file3" /><br />
<input type="file" name="file4" /><br />
<input type="file" name="file5" /><br />
<input type="submit" value="Submit" />
</form>
JavaScript:
$(function() {
$("form").submit(function(){
$("input:file", this).filter(function(){
return ($(this).val().length == 0);
}).remove();
});
});
Example: http://jsbin.com/axuka3/
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
