Question

With this simple example

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

How can I hide the submit button until somthing’s in the file field, I’ve tried to make a php script that look if the $_FILES[‘error’] == 4 or is_file_uploaded, etc and that don’t work. So I want to simply hide the button until something is selected in the file field.

The answer could be in javascript, jQuery… I don’t care 😀

Thanks

Answer 1

The <input type="file"> element has a files property.

Simply check files.length.

jQuery example, which modifies the submit button on the fly:

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