Carica più immagini usando AJAX, PHP e jQuery

Ho un sacco di problemi nel caricare più immagini usando AJAX. Scrivo questo codice:

HTML

Drop image here

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  div") .attr({"aria-valuenow":perc}) .css("width", perc+"%"); } } // display list of files display.append('
  • '+name+'
  • ' +'
    ' +'
    '); })(i); }); });

    Ho provato varie versioni e non riesco mai a inviare più dati tramite ajax. Ho provato in questo modo ciò che vedi sopra, e ora ricevo solo informazioni POST. Capisco perché ottengo il POST ma ho bisogno di inviare informazioni sui FILES e non so dove mi sbaglio.

    Non lavoro la prima volta con ajax e spesso lo uso per la maggior parte dei progetti, ma non ho mai usato per inviare più file e questo mi preoccupa ora.

    Grazie!

    Prova a utilizzare json per caricare, elaborare l’object file

    html

     
    Drop image here

    css

      #uploads { display:block; position:relative; } #uploads li { list-style:none; } #drop { width: 90%; height: 100px; padding: 0.5em; float: left; margin: 10px; border: 8px dotted grey; } #drop.hover { border: 8px dotted green; } #drop.err { border: 8px dotted orangered; } 

    js

     var display = $("#uploads"); // cache `#uploads`, `this` at `$.ajax()` var droppable = $("#drop")[0]; // cache `#drop` selector $.ajaxSetup({ context: display, contentType: "application/json", dataType: "json", beforeSend: function (jqxhr, settings) { // pre-process `file` var file = JSON.parse( decodeURIComponent(settings.data.split(/=/)[1]) ); // add `progress` element for each `file` var progress = $("", { "class": "file-" + (!!$("progress").length ? $("progress").length : "0"), "min": 0, "max": 0, "value": 0, "data-name": file.name }); this.append(progress, file.name + "
    "); jqxhr.name = progress.attr("class"); } }); var processFiles = function processFiles(event) { event.preventDefault(); // process `input[type=file]`, `droppable` `file` var files = event.target.files || event.dataTransfer.files; var images = $.map(files, function (file, i) { var reader = new FileReader(); var dfd = new $.Deferred(); reader.onload = function (e) { dfd.resolveWith(file, [e.target.result]) }; reader.readAsDataURL(new Blob([file], { "type": file.type })); return dfd.then(function (data) { return $.ajax({ type: "POST", url: "/echo/json/", data: { "file": JSON.stringify({ "file": data, "name": this.name, "size": this.size, "type": this.type }) }, xhr: function () { // do `progress` event stuff var uploads = this.context; var progress = this.context.find("progress:last"); var xhrUpload = $.ajaxSettings.xhr(); if (xhrUpload.upload) { xhrUpload.upload.onprogress = function (evt) { progress.attr({ "max": evt.total, "value": evt.loaded }) }; xhrUpload.upload.onloadend = function (evt) { var progressData = progress.eq(-1); console.log(progressData.data("name") + " upload complete..."); var img = new Image; $(img).addClass(progressData.eq(-1) .attr("class")); img.onload = function () { if (this.complete) { console.log( progressData.data("name") + " preview loading..." ); }; }; uploads.append("
  • ", img, "

  • "); }; } return xhrUpload; } }) .then(function (data, textStatus, jqxhr) { console.log(data) this.find("img[class=" + jqxhr.name + "]") .attr("src", data.file) .before("" + data.name + "
    "); return data }, function (jqxhr, textStatus, errorThrown) { console.log(errorThrown); return errorThrown }); }) }); $.when.apply(display, images).then(function () { var result = $.makeArray(arguments); console.log(result.length, "uploads complete"); }, function err(jqxhr, textStatus, errorThrown) { console.log(jqxhr, textStatus, errorThrown) }) }; $(document) .on("change", "input[name^=file]", processFiles); // process `droppable` events droppable.ondragover = function () { $(this).addClass("hover"); return false; }; droppable.ondragend = function () { $(this).removeClass("hover") return false; }; droppable.ondrop = function (e) { $(this).removeClass("hover"); var image = Array.prototype.slice.call(e.dataTransfer.files) .every(function (img, i) { return /^image/.test(img.type) }); e.preventDefault(); // if `file`, file type `image` , process `file` if (!!e.dataTransfer.files.length && image) { $(this).find(".drop-area-label") .css("color", "blue") .html(function (i, html) { $(this).delay(3000, "msg").queue("msg", function () { $(this).css("color", "initial").html(html) }).dequeue("msg"); return "File dropped, processing file upload..."; }); processFiles(e); } else { // if dropped `file` _not_ `image` $(this) .removeClass("hover") .addClass("err") .find(".drop-area-label") .css("color", "darkred") .html(function (i, html) { $(this).delay(3000, "msg").queue("msg", function () { $(this).css("color", "initial").html(html) .parent("#drop").removeClass("err") }).dequeue("msg"); return "Please drop image file..."; }); }; };

    php

     < ?php if (isset($_POST["file"])) { // do php stuff // call `json_encode` on `file` object $file = json_encode($_POST["file"]); // return `file` as `json` string echo $file; }; 

    jsfiddle http://jsfiddle.net/guest271314/0hm09yqo/

    Ho lavorato con questo plugin: https://blueimp.github.io/jQuery-File-Upload/

    È perfetto per questo.