Guardar varios archivos dentro de un formulario

[BlackJccl1]

Hola ha todos como estan veran tengo el siguiente problema cuento con un formulario de registro de informacion que envió a través de ajax en el cual cargan archivos mi dilema esta como hago para guardar varios archivos enviándolos a travez de ajax aqui mi html

Código HTML:

<div class="modal fade" id="modal_seguimiento">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Nuevo Seguimiento</h4>
        </div>
        <div class="modal-body">
          <div id="alerta-seguimiento"></div>
          <form class="form-vertical" action="index.html" method="post" id="n_registro_seguimiento">
            <div class="input-group" style="width:100%">
              <label class="control-label label-seguimiento">Fecha Requerimiento</label>
              <div class="col-md-4">
                <input type="text" class="form-control clsDatePicker" readonly="readonly" placeholder="Fecha Requerimiento" id="n_fecha_requerimiento_seguimiento">
              </div>
              <label class="control-label label-seguimiento">Fecha Ultimo Contacto/Cierre</label>
              <div class="col-md-3">
                <input type="text" class="form-control clsDatePicker" readonly="readonly" placeholder="Fecha Ultimo Contacto" id="n_fecha_ultimo_contacto_seguimiento">
              </div>
            </div>
            <div class="input-group" style="width:100%">
              <label class="control-label label-seguimiento">Proximo Contacto</label>
              <div class="col-md-4">
                <input type="text" class="form-control clsDatePicker" readonly="readonly" placeholder="Fecha Proximo Contacto" id="n_fecha_proximo_contacto_seguimiento">
              </div>
              <label class="control-label label-seguimiento">Cliente</label>
              <div class="col-md-4">
                <input type="hidden" id="n_cliente_seguimiento_id">
                <input type="text" class="form-control" placeholder="Cliente" onkeyup="autocompletar()" id="n_cliente_seguimiento">
              </div>
              <ul id="cliente_id_lista" class="autocompletar"></ul>
            </div>
            <div class="input-group" style="width:100%">
              <div class="col-md-4">
                <a id="cargar_pro">Cargar Propuesta</a>
                <input type="file" class="multi max-3" id="n_archivo_seguimiento"/>
                <p class="help-block">Maximo hasta 3 archivos</p>
              </div>
            </div>
          </form>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="quitar_alerta_seguimiento()">Cerrar</button>
        <button type="button" class="btn btn-success" onclick="guardar_seguimiento()" id="registrar_seguimiento">Guardar</button>
      </div>
    </div>
  </div>
</div>
 

aqui mi funcion que guardar estos registros

Código Javascript:

function guardar_seguimiento(){
  var ns_fecha_requerimiento = $("#n_fecha_requerimiento_seguimiento").val();
  var ns_fecha_ultimo_contacto = $("#n_fecha_ultimo_contacto_seguimiento").val();
  var ns_fecha_proximo_contacto = $("#n_fecha_proximo_contacto_seguimiento").val();
  var ns_cliente = $("#n_cliente_seguimiento_id").val();
  var nsv_cliente = $("#n_cliente_seguimiento").val();
  var ns_contacto_cliente = $("#n_contacto_cliente_seguimiento").val();
  var ns_archivo = $("#n_archivo_seguimiento").val();
  if(ns_fecha_requerimiento == ''){
    alert('Por Favor Ingresar Datos');
    $('#n_fecha_requerimiento_seguimiento').focus();
  }else if(ns_fecha_ultimo_contacto == ''){
    alert('Por Favor Ingresar Datos');
    $('#n_fecha_ultimo_contacto_seguimiento').focus();
  }else if(ns_fecha_proximo_contacto == ''){
    alert('Por Favor Ingresar Datos');
    $('#n_fecha_proximo_contacto_seguimiento').focus();
  }else if(nsv_cliente == ''){
    alert('Por Favor Ingresar Datos');
    $('#n_cliente_seguimiento').focus();
  }else if(ns_contacto_cliente.selectedIndex == 0){
    alert('Por Favor Ingresar Datos');
    $('#n_contacto_cliente_seguimiento').focus();
  }else{
    var ns_registro_completado = $("#alerta-seguimiento").html("<div class='alert alert-success'>Seguimiento Agregado</div>");
    $.ajax({
      type: "POST",
      url: "registrar-seguimiento.php",
      data:{
        'ns_fecha_requerimiento': ns_fecha_requerimiento,
        'ns_fecha_ultimo_contacto': ns_fecha_ultimo_contacto,
        'ns_fecha_proximo_contacto': ns_fecha_proximo_contacto,
        'ns_cliente': ns_cliente,
        'ns_contacto_cliente': ns_contacto_cliente,
        'ns_archivo' : ns_archivo
      },
      success: function(data)
      {
        alert(data);
        ns_registro_completado.html();
        $("#n_registro_seguimiento").Formreset();
      }
    });
  }
}
 

Gracias por su ayuda ha me olvidada estos registro se guardan en una tabla pero para los archivos pense guardarlo en otra tabla pero eso ya es en php

[Alexis88]

Tienes que usar un objeto FormData para enviarlos mediante una petición asíncrona.

Échale un vistazo a este artículo, te será muy útil.

Saludos

[BlackJccl1]

Gracias alexis por tu ayuda viendo el ejemplo si lo deseo usar en mi funcion y no como un submit como lo haria tienes algun otro articulo

[Alexis88]

¿Cómo piensas guardar los archivos?

Lo común es que el usuario seleccione uno o más archivos y mediante un formulario los envíe al servidor utilizando cualquiera de los lenguajes existentes (PHP, ASP, JSP) y los guarde. No sé cómo pretendes hacerlo.

[BlackJccl1]

Bueno si te fijas en mi codigo tengo una ventana modal en el cual envia los datos a travez de ajax sin recargar la pagina en el ejemplo que me muestra lo hacen a travez de un evento submit yo no uso ese evento si no que le asigno una funcion al boton la cual tambien muestro en la parte de arriba

[Alexis88]

En ese caso, no habría necesidad de usar un formulario, de hecho hasta con un simple enlace puedes hacer uso de Ajax, pero el punto es que tanto los botones como los <input> son elementos de formulario y lo aconsejable sería que uses uno. Si no quisieras hacerlo, lo cual constituiría un error de semántica web, puedes tener tu o tus <input type = "file"> y realizar el envío con Ajax y el FormData al cual ya no le pasarías un formulario como argumento sino que usarías el método .append(), que mencionan en el artículo que te pasé, para que añadas al o los <input type = "file">.

Saludos