4

Deseo enviar un input type="file" desde un form, para enviar todos los datos de mi formulario utilizo el formData, el cual creo desde cero para poder capturar cada uno de los datos que existe en mi formulario y recibirlo en una pagina , en esta pagina puedo capturar todos los datos que estan en el formulario pero no logro capturar el archivo, tengo lo siguiente:

JS

Función donde creó el FormData:

function dataForm_Archivos(formulario){
    var nuevoFormulario = new FormData();   
    $(formulario).find(':input').each(function() {
        var elemento= this;
        //Si recibe tipo archivo 'file'
        if(elemento.type === 'file'){
            if(elemento.value !== ''){
               var file_data = $('input[type="file"]')[0].files;
               for (var i = 0; i < file_data.length; i++) {
                  nuevoFormulario.append(elemento.name, file_data[i]);
               }
            }            
         }
     }
}

función dónde llega el id del formulario y lo envió a través de :

function registrarDocumentacion(formulario){

var datosForm = dataForm_Archivos(formulario);
var request = $.ajax({
    contentType: false,
    processData: false,
    data: datosForm,                         
    type: 'POST',
    url: 'url',
    beforeSend:function(){

     }

    });

    request.done(function(datos) { 

    });
 }

HTML

<form role="form" action='#?' id="registroDocumentacion" method="post">
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
        <label class="control-label">Adjuntar Archivo</label>
        <input type="file" id="arcAdjunto"  name="arcAdjunto" class="filestyle" placeholder="Asunto" onchange="validarArchivo('#arcAdjunto');">
        <h5><small>Recuerde, los tipos de archivos permitidos son: png, gif, jpg, jpeg, docx, xls, xlsx, docs, pdf</small></h5>
    </div>
  </div>
</div>
 <div class="row">
        <div class="col-md-12 text-left m-t-20">
                <button type="button" class="btn btn-primary waves-effect waves-light" id="enviarDoc" > Enviar <i class="fa fa-send" aria-hidden="true"></i>   </button>
          </div>
    </div>
</form>


<script type="text/javascript">
   $('#enviarDoc').click(function(event) {
     registrarDocumentacion('#registroDocumentacion')
   });
</script>

UPDATE

Logre hacerlo de esta manera

function dataForm_Archivos(formulario){
    var nuevoFormulario = new FormData();   
    $(formulario).find(':input').each(function() {
        var elemento= this;
        //Si recibe tipo archivo 'file'
        if(elemento.type === 'file'){
           if(elemento.value !== ''){
              for(var i=0; i< $('#'+elemento.id).prop("files").length; i++){
                  nuevoFormulario.append(elemento.name, $('#'+elemento.id).prop("files")[i]);
               }
            }              
         }
     }
  return nuevoFormulario;
}

3 respuestas 3

4

Puedes usar para esto el; FormData Objects, aquí te voy a dejar un ejemplo:

 var formData = new FormData();

 formData.append("archivoDelUsuario", fileInputElement.files[0]); //Aquí capturas el fileInput seleccionado por el usuario
 var archivoBlob = new Blob([content], { type: "text/xml"}); //creamos un archivo tipo blob
 formData.append("elArchivo", archivoBlob); //listo agregamos el archivo

Este código fue consultado y en su mayoria extraido de la documentación oficial de Developer Mozilla

1

En el ejemplo que pones tu función dataForm_Archivos(formulario) parece tener la lógica correcta, excepto que no devuelve nada (necesita return nuevoFormulario; al final de la función) ya que var nuevoFormulario = new FormData(); es local a la función (no existe fuera de ella); así var datosForm = dataForm_Archivos(formulario); realmente no recoge nada.

Prueba con:

function dataForm_Archivos(formulario){
    var nuevoFormulario = new FormData();   
    $(formulario).find(':input').each(function() {
        var elemento= this;
        //Si recibe tipo archivo 'file'
        if(elemento.type === 'file'){
            if(elemento.value !== ''){
               var file_data = $('input[type="file"]')[0].files;
               for (var i = 0; i < file_data.length; i++) {
                  nuevoFormulario.append(elemento.name, file_data[i]);
               }
            }            
         }
     }

    return nuevoFormulario;
}
1
  • Gracias, si en realidad faltaba el return pero cuando capturó el campo en php no me retorna nada, encontré otra forma de hacerlo, actualizaré el post para colocarla
    – Alan
    Commented el 24 jun. 2016 a las 13:50
0

Si es que todavia no solucionaste esto. También te faltaba el enctype="multipart/form-data" en el

<form enctype="multipart/form-data"></form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.