Estoy tratando de enviar un archivo a mi base de datos junto con el texto usando esto:
let formData = new FormData($('#image_form')[0]); formData.append("message", $('#messageInput').val()); $(document).ready(function() { $('#image_form').submit(function(e) { e.preventDefault(); $.ajax({ url: "https://example.com/test.php", type: "POST", data: new FormData(this), contentType: false, processData:false, success: function(status) { $('#result').append(status); } }); }); });Ese es el DOM
<form id="image_form" enctype="multipart/form-data"> <input type="file" name="files[]" id="files[]" multiple > <input type="submit" name="submit" is="submit" id="submit"/> </form> <input type="text" name="message" id="messageInput">PHP:
<?php $file = $_FILES['files']; $message = $_POST['message']; var_dump($_POST); ?>La imagen es recibida por php y se puede mostrar. Pero el Texto no lo es .
Además de la imagen, el script php genera:
array(1) { ["submit"]=> string(6) "Submit" }Debe asignar formData dentro del controlador de envío, para que obtenga los valores después de que el usuario haya enviado el formulario.
$(document).ready(function() { $('#image_form').submit(function(e) { e.preventDefault(); let formData = new FormData($('#image_form')[0]); formData.append("message", $('#messageInput').val()); $.ajax({ url: "https://example.com/test.php", type: "POST", data: formData, contentType: false, processData: false, success: function(status) { $('#result').append(status); } }); }); });