也许这就是你需要的。
正如 charlietfl 在 cmets 中已经说过的，您可以使用 FormData
这是一个例子：
First try with multiple inputs
在这里你可以看到它是如何保存的：
{
"args": {},
"data": "",
"files": {
"input1": "yourimg1",
"input2": "yourimg2"
},
"form": {
"input1": [
"house",
"london"
],
"input2": [
"bridge",
"berlin"
]
},
"headers": {
....
}
现在您的文件和描述与输入字段的名称相关联。重要的是所有属于的输入字段都具有相同的名称。
所以input1中的文件属于input1数组中的描述，input2中的文件属于input2数组中的描述，以此类推。
您可以找到here 的一些很好的解释，如果您愿意，可以使用this 站点来测试代码和输出。
您可以从这里获取代码。在js函数末尾添加
console.log(request.response);
并将网址更改为http://httpbin.org/post。
或者只是玩一下。
编辑：
如果你想要多个文件，你可以这样做：
var testForm = document.getElementById('test-form');
var div = document.getElementById('output');
var data;
testForm.onsubmit = function(event) {
event.preventDefault();
var request = new XMLHttpRequest();
request.open('POST', 'http://your.url/post', /* async = */ false);
var formData = new FormData(document.getElementById('test-form'));
request.send(formData);
}
function handleFileSelect(evt) {
var files = evt.target.files;
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML =
[
'<img src="',
e.target.result,
'" title="',
escape(theFile.name),
'"/><div class="desc"><div>Location:<input name="',
escape(theFile.name),
'"> </div><br><div>Title:<input name="',
escape(theFile.name),
'"></div><br><div>Description:<input name="',
escape(theFile.name),
'"></div><br></div>'
].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
//makes description visible
$(document).on("click","img",function(){
$(this).next().css("display", "block");
});
document.getElementById('files').addEventListener('change', handleFileSelect, false);
.desc{
display:none;
}
img{
height: 75px;
border: 1px solid #000;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='test-form'>
<input type="file" id="files" name='input1' multiple/><br>
<output id="list"></output><br>
<input type='submit'>
</form>
那么这就是你的输出：
{
"args": {},
"data": "",
"files": {
"input1": "all_your_images"
},
"form": {
"favicon.png": [
"1a",
"1b",
"1c"
],
"loginBackground.jpg": [
"2a",
"2b",
"2c"
]
},
"headers": {
....}
缺点是所有图片都是一起上传的。
正如您现在所看到的，每个描述都保存在一个数组中，并带有其所属图像的名称。
<div>Location:<input name="', escape(theFile.name),'"> </div>
这为 inputname 提供了所属图像的名称。
因此，如果您想以数组或类似方式保护服务器上的图像和描述，则必须使用 PHP 获取上传图像的名称。
$filename = pathinfo($_FILES['picture']['name'], PATHINFO_FILENAME);
（见HERE）
我知道您希望通过拖放来实现它，但是这样的代码会很长。
如果您仍然想这样做，我可以推荐您this site。
您只需将功能添加到我发布的代码中即可。
如果您想直接保护图像中的信息，那么我只能指向answer of tnt-rox。那么您应该访问他的链接并阅读有关 exif 的更多信息。