php ajax 请求多张图片,使用Ajax、PHP和jQuery上载多个图像

试着利用json要上传，处理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;

}

JSvar 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` eventsdroppable.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;

};