Question

是否可以在上传前添加元数据信息和html 5图像？

澄清：html 5张图片上传（如拖放缩略图方法或单输入文件）sample HTML 5 Upload/drag_drop

所以说用户正在上传10张图片，他会为描述它的每张图片填写一些文字信息，然后这些信息将保存在服务器上。因此，对于每个缩略图用户，可以添加＆＃34; title＆＃34;，＆＃34; location＆＃34;，＆＃34; description＆＃34;在文本框中。

以下示例允许上传单个图像并预览缩略图，我想要实现的是与此缩略图进行交互并将一些文本随之提交给服务器。

澄清2 ：此问题与图片EXIF无关，
我问的是用户可以添加到图片中的一般元数据信息，例如＆＃34;我在婚礼前拍摄了照片＆＃34;或者＃34;这张旧房子的照片＆＃34;或者喜欢标签＆＃34;红色＆＃34;

＆＃13;

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]);
};

＆＃13;

<input type="file" id="files" />
<img  width="100" height="140" id="image" />

＆＃13;

Answer 1

也许这就是你所需要的。正如charlietfl在评论中已经说过的那样你可以使用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>

这为输入名称提供了所属图像的名称。

因此，如果您想要在数组中保护服务器上的图像和描述或类似的东西，您必须使用PHP获取上传图像的名称。

$filename = pathinfo($_FILES['picture']['name'], PATHINFO_FILENAME);

（见HERE）

我知道你想通过拖放来实现它，但代码将会很长。如果您仍想这样做，我可以向您推荐this site。您只需将功能添加到我发布的代码中即可。

如果您想直接在图像中保护信息，那么我只能指向answer of tnt-rox。然后你应该访问他的链接并阅读有关exif的更多信息。

Answer 2

我不确定你为什么要为这个问题投票。它可能与你的措辞有关。我假设您的意思是Exif数据而不是元数据。见https://en.wikipedia.org/wiki/Exif

要在JavaScript中修改图像的Exif数据，您可以使用hMatoba的piexifjs，它允许您在上传到服务器之前修改图像Exif元数据。

希望这有帮助）

Answer 3

我认为问题在于你放了静态图像元素。所以我制作了一个代码，为每个文件生成图像和标题文本框，这是我所达到的代码片段

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>

我希望它可以帮到你。

Answer 4

为此，只需使用表单从用户那里获取详细信息。代码示例如下，

HTML代码，

var video = document.getElementById('video');

video.addEventListener('click',function(){
    video.play();
},false);

在您的数据库中添加这些列，

TableName：tblImages
第1列：id [int]
第2列：imageTitle [varchar（255）]
第3列：imageLocation [varchar（255）]
第4栏：说明[文字]
第5列：imageName [varchar（255）]

然后使用此PHP文件（imageSave.php）

<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>

将元数据添加到Html5文件上传

4 个答案: