Ocultar el botón de envío de carga si el campo "archivo" está vacío

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

Muchas Gracias

preguntado el 09 de marzo de 12 a las 14:03

4 Respuestas

El <input type="file"> elemento tiene un files propiedad.

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

respondido 09 mar '12, 14:03

Should the submit button be disabled at start?? - Warface

@Warface Yes, this can be done by adding disabled to your submit button. - Rob W

Use this. Attach the code on the change evento del campo de archivo.

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

respondido 09 mar '12, 14:03

The default state of the submit should be hidden (CSS display: none) And on change event of the file field, you show that submit button

Her's the code

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

respondido 09 mar '12, 14:03

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

respondido 09 mar '12, 14:03

ActiveXObject is a proprietary Micro$oft browser extension. This code does only a veces work in (older versions of) IE. Also, getElementById is a function, not a property. Use parens instead of brackets. - Rob W

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.