comment télécharger un fichier en utilisant la sérialisation jquery
J'ai donc un formulaire et je le soumets via ajax en utilisant la fonction de sérialisation jquery
serialized = $(Forms).serialize();
$.ajax({
type : "POST",
cache : false,
url : "blah",
data : serialized,
success: function(data) {
}
mais alors que se passe-t-il si le formulaire a un champ <input type="file"> .... comment puis-je transférer le fichier dans le formulaire en utilisant cette méthode de sérialisation ajax ... l'impression de $ _FILES ne génère rien
Un fichier ne peut pas être téléchargé à l'aide de AJAX car vous ne pouvez pas accéder au contenu d'un fichier stocké sur l'ordinateur client et l'envoyer dans la demande à l'aide de javascript. Une des techniques pour y parvenir consiste à utiliser des iframes cachés. Il existe un plugin Nice jquery qui vous permet d’ajaxifier vos formulaires et il prend en charge le téléchargement de fichiers également. Donc, en utilisant ce plugin, votre code ressemblera simplement à ceci:
$(function() {
$('#ifoftheform').ajaxForm(function(result) {
alert('the form was successfully processed');
});
});
Le plug-in se charge automatiquement de s'abonner à l'événement submit du formulaire, d'annuler l'envoi par défaut, de sérialiser les valeurs, d'utiliser la méthode appropriée et de gérer les champs de téléchargement de fichier, ...
Vous pouvez maintenant télécharger des fichiers avec Ajax!
Exemples:
https://stackoverflow.com/a/8758614/1072492
http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/
Cela fonctionne pour tout type de formulaire
$(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)
{
}
});
});
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,
Cela a fonctionné pour moi! Il suffit de définir processData et contentType False.
Vous pouvez télécharger des fichiers via AJAX en utilisant la méthode FormData. Bien que IE7,8 et 9 ne prennent pas en charge la fonctionnalité FormData.
$.ajax({
url: "ajax.php",
type: "POST",
data: new FormData('form'),
contentType: false,
cache: false,
processData:false,
success: function(data) {
$("#response").html(data);
}
});
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();
?>
hmmmm Je pense qu’il existe un moyen efficace de le créer spécialement pour les personnes qui souhaitent cibler tous les navigateurs et pas seulement FormData navigateur pris en charge
l'idée d'avoir cachéIFRAMEsur la page et d'effectuer une soumission normale pour l'exemple From inside IFrame
<FORM action='save_upload.php' method=post
enctype='multipart/form-data' target=hidden_upload>
<DIV><input
type=file name='upload_scn' class=file_upload></DIV>
<INPUT
type=submit name=submit value=Upload /> <IFRAME id=hidden_upload
name=hidden_upload src='' onLoad='uploadDone("hidden_upload")'
style='width:0;height:0;border:0px solid #fff'></IFRAME>
</FORM>
le plus important est de créer une cible de formulaire en iframeIDou nom et enctype multipart/form-data masqué pour autoriser l'acceptation de photos
côté javascript
function getFrameByName(name) {
for (var i = 0; i < frames.length; i++)
if (frames[i].name == name)
return frames[i];
return null;
}
function uploadDone(name) {
var frame = getFrameByName(name);
if (frame) {
ret = frame.document.getElementsByTagName("body")[0].innerHTML;
if (ret.length) {
var json = JSON.parse(ret);
// do what ever you want
}
}
}
Exemple côté serveur PHP
<?php
$target_filepath = "/tmp/" . basename($_FILES['upload_scn']['name']);
if (move_uploaded_file($_FILES['upload_scn']['tmp_name'], $target_filepath)) {
$result = ....
}
echo json_encode($result);
?>
HTML5 introduit la classe FormData qui peut être utilisée pour le téléchargement de fichiers avec ajax.
La prise en charge de FormData commence à partir des versions de navigateurs de bureau suivantes. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+
https://developer.mozilla.org/en/docs/Web/API/FormData/FormData
$(document).on('click', '#submitBtn', function(e){
e.preventDefault();
e.stopImmediatePropagation();
var form = $("#myForm").closest("form");
var formData = new FormData(form[0]);
$.ajax({
type: "POST",
data: formData,
dataType: "json",
url: form.attr('action'),
processData: false,
contentType: false,
success: function(data) {
alert('Sucess! Form data posted with file type of input also!');
}
)};});
En utilisant new FormData() et en configurant processData: false, contentType:false dans un appel ajax, l'envoi du formulaire avec l'entrée de fichier a fonctionné pour moi
En utilisant le code ci-dessus, je suis en mesure de soumettre des données de formulaire avec un champ de fichier également via Ajax