Cómo validar un campo de carga de archivos usando Javascript/jquery

¿Cómo puedo validar si el usuario ha seleccionado un archivo para cargar?Cómo validar un campo de carga de archivos usando Javascript/jquery

Editar: chocó

Fuente

2009-05-07 Click Upvote

http://www.angulartutorial.net/2016/05/file-upload-validation.html – Prashobh

Compruebe que es value propiedad:

En jQuery (ya que su etiqueta lo menciona):

$('#fileInput').val()

O en JavaScript básico:

document.getElementById('myFileInput').value

Fuente

2009-05-07 08:01:32 Sietse

En Firefox, al menos, el inspector DOM me está diciendo que los elementos de entrada del archivo tienen una propiedad denominada files. Deberías poder verificar su longitud.

document.getElementById('myFileInput').files.length

Fuente

2009-05-07 05:33:38 nickf

no funciona en Chrome, así que probablemente no trabajará en el IE o bien –

Es HTML5: http: // stackoverflow .com/questions/7684011/get-the-file-names-from-multiple-file-upload-field – ANeves

Tengo esto de alguna foro. Espero que te sea útil.

<script type="text/javascript"> 
function validateFileExtension(fld) { 
    if(!/(\.bmp|\.gif|\.jpg|\.jpeg)$/i.test(fld.value)) { 
     alert("Invalid image file type.");  
     fld.form.reset(); 
     fld.focus();   
     return false; 
    } 
    return true; 
} </script> </head> 
<body> <form ...etc... onsubmit="return 
validateFileExtension(this.fileField)"> <p> <input type="file" 
name="fileField" onchange="return validateFileExtension(this)"> 
<input type="submit" value="Submit"> </p> </form> </body>

Fuente

2012-01-09 04:25:37 Chaitu

Bienvenido a SO. Si obtiene un código de otra fuente, debe atribuirlo correctamente y/o vincularlo, ya que esto podría constituir una violación de los derechos de autor, y al menos es una cortesía otorgarle crédito donde corresponda. – Scott

Mi función comprobará si el usuario ha seleccionado el archivo o no y también se puede comprobar si desea permitir que la extensión de archivo o no.

Prueba esto:

 
<input type="file" name="fileUpload" onchange="validate_fileupload(this.value);"> 

function validate_fileupload(fileName) 
{ 
    var allowed_extensions = new Array("jpg","png","gif"); 
    var file_extension = fileName.split('.').pop().toLowerCase(); // split function will split the filename by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the filename. 

    for(var i = 0; i <= allowed_extensions.length; i++) 
    { 
     if(allowed_extensions[i]==file_extension) 
     { 
      return true; // valid file extension 
     } 
    } 

    return false; 
}

Fuente

2013-01-08 10:22:46

El ciclo for debe ser i KevInSol

Sobre la solución Ravinders, este código se detiene la forma de ser presentado. También sería aconsejable verificar la extensión en el lado del servidor. Entonces no se consigue que los hackers suban lo que quieran.

<script> 
var valid = false; 

function validate_fileupload(input_element) 
{ 
    var el = document.getElementById("feedback"); 
    var fileName = input_element.value; 
    var allowed_extensions = new Array("jpg","png","gif"); 
    var file_extension = fileName.split('.').pop(); 
    for(var i = 0; i < allowed_extensions.length; i++) 
    { 
     if(allowed_extensions[i]==file_extension) 
     { 
      valid = true; // valid file extension 
      el.innerHTML = ""; 
      return; 
     } 
    } 
    el.innerHTML="Invalid file"; 
    valid = false; 
} 

function valid_form() 
{ 
    return valid; 
} 
</script> 

<div id="feedback" style="color: red;"></div> 
<form method="post" action="/image" enctype="multipart/form-data"> 
    <input type="file" name="fileName" accept=".jpg,.png,.bmp" onchange="validate_fileupload(this);"/> 
    <input id="uploadsubmit" type="submit" value="UPLOAD IMAGE" onclick="return valid_form();"/> 
</form>

Fuente

2017-07-27 10:16:59

Cómo validar un campo de carga de archivos usando Javascript/jquery

Respuesta

Cuestiones relacionadas