¿Cómo utilizar FormData para cargar archivos AJAX?
Este es mi HTML que estoy generando dinámicamente usando la función de arrastrar y soltar.
<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">
<fieldset>
<div id="legend" class="">
<legend class="">file demoe 1</legend>
<div id="alert-message" class="alert hidden"></div>
</div>
<div class="control-group">
<!-- Text input-->
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" placeholder="placeholder" class="input-xlarge" name="name">
<p class="help-block" style="display:none;">text_input</p>
</div>
<div class="control-group"> </div>
<label class="control-label">File Button</label>
<!-- File Upload -->
<div class="controls">
<input class="input-file" id="fileInput" type="file" name="file">
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>
</form>
Este es mi código JavaScript:
<script>
$('.wpc_contact').submit(function(event){
var formname = $('.wpc_contact').attr('name');
var form = $('.wpc_contact').serialize();
var FormData = new FormData($(form)[1]);
$.ajax({
url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',
data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
type : 'POST',
processData: false,
contentType: false,
success : function(data){
alert(data);
}
});
}
Para un uso correcto de los datos del formulario, debe seguir 2 pasos.
Preparativos
Puede entregar su formulario completo a FormData() para su procesamiento.
var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);
o especificar datos exactos para FormData()
var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);
Enviando formulario
La solicitud Ajax con jquery se verá así:
$.ajax({
url: 'Your url here',
data: formData,
type: 'POST',
contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
processData: false, // NEEDED, DON'T OMIT THIS
// ... Other options like success and etc
});
Después de esto, enviará una solicitud ajax como si enviara un formulario normal conenctype="multipart/form-data"
Actualización: esta solicitud no puede funcionar sin type:"POST"opciones ya que todos los archivos deben enviarse mediante una solicitud POST.
Nota: contentType: false sólo disponible desde jQuery 1.6 en adelante
No puedo agregar un comentario arriba porque no tengo suficiente reputación, pero la respuesta anterior fue casi perfecta para mí, excepto que tuve que agregar
tipo: "POST"
a la llamada .ajax. Estuve rascándome la cabeza durante unos minutos tratando de descubrir qué había hecho mal, eso es todo lo que necesitaba y funciona de maravilla. Este es el fragmento completo:
Todo el crédito a la respuesta anterior, esto es solo un pequeño ajuste. Esto es sólo en caso de que alguien más se quede atascado y no pueda ver lo obvio.
$.ajax({
url: 'Your url here',
data: formData,
type: "POST", //ADDED THIS LINE
// THIS MUST BE DONE FOR FILE UPLOADING
contentType: false,
processData: false,
// ... Other options like success and etc
})
