1

我有以下 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>

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

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

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

4

2 回答 2

1

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

var formData = new FormData();

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

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

于 2015-02-05T23:20:33.297 回答
0 
$(Your input id).on('fileloaded', function (event, file, previewId, index, reader) {
    console.log(reader.result)
}

您可以从 reader.result 获取图像数据，只需尝试

于 2016-12-28T07:46:04.750 回答