0

En una vista tengo un <input type = "file" id="theFile" multiple /> donde subo archivos correctamente... pero ahora necesitó enviar además de estos algunos datos adicionales como (NombreArticulo,CategoriaArticulo), etc.

¿Cómo puedo refactorizar mi código para hacer esto en una única función?

HTML

  <input type="file" id="theFile"  multiple accept="image/png, image/jpeg, image/jpg"  />
  <input type="text" id="nombreArticulo" />
  <input type="text" id="categoriaArticulo" />

JavaScript

function UploadFileMethod() {
    var input = document.getElementById('theFile');
    var files = input.files;

    if (files.length == 0) {
        toastr.warning("Debe elegir imagenes del articulo");
        return false;
    }

    var formData = new FormData();
    for (var i = 0; i < files.length ; i++) {
        formData.append('files', files[i]);
    }

    $.ajax({
        url: urlUploadDataImg,
        data: formData,
        processData: false,
        contentType: false,
        type: "POST",
        timeout: 0,
        success: function (data) {
            console.log(data);
            if (data.estado) {
                toastr.success(data.mensaje);
            }
            else {
                toastr.error(data.mensaje);
            }
        }, error: function (jqXHR, textStatus, errorThrown) {
            toastr.error('ERROR INESPERADO: ' + textStatus + ' ' + jqXHR + ' ' + errorThrown);
        }
    });

    return false;
}

1 respuesta 1

1

Si los elementos están dentro de un formulario, simplemente agrega el atributo name a cada input, luego en php los recibes justo como está enviando actualmente la data aquí: data: formData.

Puedes verificar haciendo print_r($_POST) y te debería devolver los valores que enviaste en el formulario.

<input type="file" id="theFile" multiple accept="image/png, image/jpeg, image/jpg" name="theFile[]" />
<input type="text" id="nombreArticulo" name="nombreArticulo" />
<input type="text" id="categoriaArticulo" name="categoriaArticulo" />

Fijate en la diferencia que hay en el input de tipo file, ya que al tratase de un input múltiple, se debe poner los corchetes [] para indicar que recibe varios archivos y en php se recoge como un array en $FILES en lugar de $_POST.(Omite esto si te llegan todos los archivos con el método que usas actualmente)

Si no es un formulario, basta con recoger cada value de cada input en una variable y agregarlos al formData así:

var nombreArticulo = document.getElementById('nombreArticulo').value;
var categoriaArticulo= document.getElementById('categoriaArticulo').value;
formData.append('nombreArticulo', nombreArticulo);
formData.append('categoriaArticulo', categoriaArticulo);

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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