php - multiples - cómo subir archivos usando la serialización jquery

subir multiples imagenes php jquery

Question

Así que tengo un formulario y estoy enviando el formulario a través de ajax usando la función de serialización jquery

 serialized = $(Forms).serialize();
$.ajax({
type : "POST",
cache : false,
url : "blah",
data : serialized,
success: function(data) {
}

pero ¿y si el formulario tiene un campo <input type="file"> ... cómo paso el archivo al formulario usando este método de serialización ajax ... imprimiendo $ _FILES no da salida a nada

Answer 1

¡Ahora puedes subir archivos con Ajax!

Ejemplos:

https://stackoverflow.com/a/8758614/1072492

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Answer 2

Funciona para cualquier tipo de forma

$(document).on("submit", "form", function(event)
{
event.preventDefault();
var url=$(this).attr("action");
$.ajax({
url: url,
type: $(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
},
error: function (xhr, desc, err)
{
}
});
});

Answer 3

HTML5 presenta la clase FormData que se puede usar para subir archivos con ajax.

La compatibilidad con FormData comienza desde las siguientes versiones de navegadores de escritorio. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

https://developer.mozilla.org/en/docs/Web/API/FormData/FormData

Answer 4

No se puede cargar un archivo con AJAX porque no puede acceder al contenido de un archivo almacenado en la computadora cliente y enviarlo en la solicitud utilizando javascript. Una de las técnicas para lograr esto es utilizar iframes ocultos. Hay un buen complemento de formulario jquery que le permite AJAXify sus formularios y también admite cargas de archivos . Entonces, usando este plugin su código simplemente se verá así:

$(function() {
$(''#ifoftheform'').ajaxForm(function(result) {
alert(''the form was successfully processed'');
});
});

El complemento se ocupa automáticamente de suscribirse al evento de submit del formulario, cancelar el envío predeterminado, serializar los valores, usar el método adecuado y manejar los campos de carga de archivos, ...

Answer 5

Puede cargar archivos a través de AJAX utilizando el método FormData. Aunque IE7,8 y 9 no son compatibles con la funcionalidad de FormData.

$.ajax({
url: "ajax.php",
type: "POST",
data: new FormData(''form''),
contentType: false,
cache: false,
processData:false,
success: function(data) {
$("#response").html(data);
}
});

Answer 6

HTML

<form name="my_form" id="my_form" accept-charset="multipart/form-data" onsubmit="return false">
<input id="name" name="name" placeholder="Enter Name" type="text" value="">
<textarea id="detail" name="detail" placeholder="Enter Detail"></textarea>
<select name="gender" id="gender">
<option value="male" selected="selected">Male</option>
<option value="female">Female</option>
</select>
<input type="file" id="my_images" name="my_images" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
</form>

JavaScript

var data = new FormData();
//Form data
var form_data = $(''#my_form'').serializeArray();
$.each(form_data, function (key, input) {
data.append(input.name, input.value);
});
//File data
var file_data = $(''input[name="my_images"]'')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append("my_images[]", file_data[i]);
}
//Custom data
data.append(''key'', ''value'');
$.ajax({
url: "URL",
method: "post",
processData: false,
contentType: false,
data: data,
success: function (data) {
//success
},
error: function (e) {
//error
}
});

PHP

<?php
echo ''<pre>'';
print_r($_POST);
print_r($_FILES);
echo ''</pre>'';
die();
?>

Answer 7

 var form = $(''#job-request-form'')[0];
var formData = new FormData(form);
event.preventDefault();
$.ajax({
url: "/send_resume/", // the endpoint
type: "POST", // http method
processData: false,
contentType: false,
data: formData,

¡Funcionó para mí! simplemente configure processData y contentType False.