Télécharger des images multiples à l'aide d'AJAX, PHP et jQuery
J'ai beaucoup de problème pour télécharger plusieurs images à l'aide d'AJAX. J'écris ce code:
HTML
<form id="upload" method="post" enctype="multipart/form-data">
<div id="drop" class="drop-area">
<div class="drop-area-label">
Drop image here
</div>
<input type="file" name="file" id="file" multiple/>
</div>
<ul class="gallery-image-list" id="uploads">
<!-- The file uploads will be shown here -->
</ul>
</form>
<div id="listTable"></div>
jQuery/AJAX
$(document).on("change", "input[name^='file']", function(e){
e.preventDefault();
var This = this,
display = $("#uploads");
//list all file data
$.each(This.files, function(i, obj){
//for each image run script asynchronous
(function(i) {
//get data from input file
var file = This.files[i],
name = file.name,
size = file.size,
type = file.type,
lastModified = file.lastModified,
lastModifiedDate = file.lastModifiedDate,
webkitRelativePath = file.webkitRelativePath,
slice = file.slice,
i = i;
//DEBUG
/*
var acc = []
$.each(file, function(index, value) {
acc.push(index + ": " + value);
});
alert(JSON.stringify(acc));
*/
$.ajax({
url:'/ajax/upload.php',
contentType: "multipart/form-data",
data:{
"image":
{
"name":name,
"size":size,
"type":type,
"lastModified":lastModified,
"lastModifiedDate":lastModifiedDate,
"webkitRelativePath":webkitRelativePath,
//"slice":slice,
}
},
type: "POST",
//Custom XMLHttpRequest
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
//Check if upload property exists
if(myXhr.upload)
{
//For handling the progress of the upload
myXhr.upload.addEventListener("progress",progressHandlingFunction, false);
}
return myXhr;
},
cache: false,
success : function(data){
//load ajax data
$("#listTable").append(data);
}
});
//display progress
function progressHandlingFunction(e){
if(e.lengthComputable){
var perc = Math.round((e.loaded / e.total)*100);
perc = ( (perc >= 100) ? 100 : ( (perc <= 0) ? 0 : 0 ) );
$("#progress"+i+" > div")
.attr({"aria-valuenow":perc})
.css("width", perc+"%");
}
}
//display list of files
display.append('<li>'+name+'</li><div class="progress" id="progress'+i+'">'
+'<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">'
+'</div></div>');
})(i);
});
});
J'ai essayé différentes versions et je n'ai jamais réussi à envoyer plusieurs données via ajax. J'ai essayé de cette façon, ce que vous voyez ci-dessus, et maintenant je reçois uniquement afficher des informations. Je comprends pourquoi je POSTE, mais j'ai besoin d'envoyer des informations sur les FICHIERS et je ne sais pas où je me trompe.
Je fonctionne pas la première fois avec l'ajax et l'utilisent souvent pour la plupart des projets, mais je ne l'ai jamais utilisé pour envoyer plusieurs fichiers et qui me dérange maintenant.
Merci!
- Veuillez préciser: 1. contentType est
multipart/form-data
mais les données ne sont pas (jQuery.param va convertir js objet dansx-www-form-urlencoded
au lieu de cela), alors les données seront perdues dans la traduction. Que voulez-vous transférer et comment? 2. Données réelles de l'image n'est pas téléchargée, est-ce intentionnel? 3. Un ajax est appelée pour chaque fichier, causant beaucoup de connexion et les conflits en cours gestionnaire, est-ce intentionnel? 4. Je ne vois pas de glisser / déposer code. Avez-vous envie?
Vous devez vous connecter pour publier un commentaire.
Essayer en utilisant
json
à télécharger , processus defile
objethtml
css
js
php
jsfiddle http://jsfiddle.net/guest271314/0hm09yqo/
$file
- je utiliser pour la manipulation de données et pouvez ne télécharger comme avec$_FILE[]
?$file
àphp
partie à la poste pas même que$_FILES
.$_FILES
semblent avoir besoin de<form>
élément , avecenctype="multipart/form-data"
attribut. Approche à la poste utiliseJSON
type de données à afficher , processus de réponse. Voir php.net/manual/en/features.file-upload.post-method.php , w3.org/TR/html401/interact/forms.html#h-17.13.4.2 , sitepoint.com/handle-file-uploads-php , stackoverflow.com/questions/3586919/... .data-uri
developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs àfile.file
, le nom de l'image àfile.name
.J'ai l'habitude de travailler avec ce plugin:
https://blueimp.github.io/jQuery-File-Upload/
Il est parfait pour cela.