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

Question

是否可以在上传之前将元数据信息与 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" />

Answer 1

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

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

希望这有帮助)