javascript - 如何获取 Bootstrap File Input 插件创建的图像数据

Question

我有以下 div 来执行选择和显示所选图像、更改图像和取消图像的工作。这一切都是由Bootstrap File Input完成的插件。

<div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="fileinput-new thumbnail">
        <img src="http://www.placehold.it/512x512/EFEFEF/AAAAAA&amp;text=NO+IMAGE" alt="" class="img-responsive" />
    </div>
    <div class="fileinput-preview fileinput-exists thumbnail">
    </div>
    <div>
        <span class="btn default btn-file">
            <span class="fileinput-new">Select image </span>
            <span class="fileinput-exists">Change </span>
        <input type="file" name="..." >
        </span>
        <a href="#" class="btn red fileinput-exists" data-dismiss="fileinput">Remove </a>
    </div>
</div>

现在这个引导文件输入插件创建以下 img 元素，它保存图像的数据。我需要这些数据，这样我就可以使用 AngularJS 将其发送到我的 Node 服务器，并将该图像保存在我的服务器上的文件夹中。

<div class="fileinput-preview fileinput-exists thumbnail">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAA3=...">
</div>

有人可以帮助我使用 AngularJS 通过 Bootstrap 文件输入获取动态生成的 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAA3=... 图像数据吗？

Answer 1

创建表单数据并将所有文件附加到其中。

var formData = new FormData();

$('#id').on('fileloaded', function (event, file, previewId, index, reader) {
    formData.append('file', file);
});

现在，formData将保存您选择的所有文件，并可以发送到服务器。