是否可以在上传之前添加元数据信息和html 5图像？
澄清：html 5图像上传（如拖放缩略图方法或单个输入文件）sample HTML 5 Upload/drag_drop
所以说用户正在上传10张图片，他会为描述它的每张图片填写一些文字信息，然后这些信息将保存在服务器上。因此，对于每个缩略图，用户可以在文本框中添加“标题”，“位置”，“描述”。
下面的示例允许上传单个图像和预览缩略图，我想要实现的是与此缩略图交互并将一些文本提交给服务器。
澄清2：这个问题与图片EXIF无关， 我问的是用户可以添加到图片中的一般元数据信息，比如“我在拍婚礼前拍的照片”，或“我的旧房子的照片”或类似标签“红色”
document.getElementById("files").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
// get loaded data and render thumbnail.
document.getElementById("image").src = e.target.result;
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
};<input type="file" id="files" />
<img width="100" height="140" id="image" />也许这就是你需要的。正如charlietfl在评论中已经说过你可以使用FormData这是一个例子：
First try with multiple inputs
在这里你可以看到它的保存方式：
{
"args": {},
"data": "",
"files": {
"input1": "yourimg1",
"input2": "yourimg2"
},
"form": {
"input1": [
"house",
"london"
],
"input2": [
"bridge",
"berlin"
]
},
"headers": {
....
}
现在，您的文件和描述与输入字段的名称相关联。所有beloning输入字段都具有相同的名称非常重要。
所以来自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的信息。
我不知道你为什么要为这个问题投票。它可能与你的措辞有关。我假设您的意思是Exif数据而不是元数据。见https://en.wikipedia.org/wiki/Exif
要在JavaScript中修改图像的Exif数据，您可以使用hMatoba的piexifjs，它允许您在上传到服务器之前修改图像Exif元数据。
希望这可以帮助 ）
我认为问题是你把静态图像元素。因此，我为每个文件创建了一个生成图像和标题文本框的代码，这是我所达到的代码片段
var count = 0;
document.getElementById("files").onchange = function (e) {
var image = document.createElement("img");
image.width = "100";
for(var i=0;i<this.files.length;i++){
var reader = new FileReader();
reader.onload = function (e) {
//Add the image
var im = image.cloneNode();
im.id= "image"+count;
im.src = e.target.result;
document.body.appendChild(im);
//Add the title for example
var title = document.createElement("input");
title.id = "title-img"+count;
title.placeholder= "Enter the title of image "+count;
document.body.appendChild(title);
count++;
};
reader.readAsDataURL(this.files[i]);
}
};<html>
<head>
</head>
<body>
<input type="file" multiple id="files" />
</body>
</html>我希望它对你有所帮助。
为此，只需使用表单从用户获取详细信息。代码示例如下，
HTML代码，
<Form action="imageSave.php" method="Post">
<table>
<tr>
<td> Title </td>
<td> <input type="text" name="imageTitle" > </td>
<tr>
<tr>
<td> Location</td>
<td> <input type="text" name="imageLocation" > </td>
<tr>
<tr>
<td> Description</td>
<td> <textarea name="description" > </textarea> </td>
<tr>
<tr>
<td> Image </td>
<td> <input type="file" name="files" > </td>
<tr>
</table>
</Form>
在您的数据库中添加这些列，
然后使用这个PHP文件（imageSave.php）
$imageTitle=$_POST['imageTitle'];
$imageLocation=$_POST['imageLocation'];
$description=$_POST['description'];
$imageName=$_FILES['files']['name'];
if ($_FILES["files"]["error"] == 0)
{
$remove_these = array(' ','`','"','\'','\\','/','(',')');
$newname = str_replace($remove_these,'',$_FILES['files']['name']);
//Make the filename unique
$newname = time().".".$extension;
//Save the uploaded the file to another location
$upload_path = "/images/$newname";
//echo $upload_path;
move_uploaded_file($_FILES['files']['tmp_name'], $upload_path);
// Query and Code to Update the Database
}