如何获取由Bootstrap File Input插件创build的图像数据

我有下面的select和显示选定的图像，改变图像，取消它的工作。 所有这些都是由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文件input插件创build下面的img元素，它保存图像的数据。 我需要这些数据，所以我可以使用AngularJS发送到我的节点服务器，并将该图像保存在我的服务器上的一个文件夹。

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

有人可以帮我获得dynamic生成的data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAA3=...通过使用AngularJS Bootstrap文件input的图像数据？

Answer 1

创build表单数据并将所有文件附加到它。

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

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

Answer 2

 $(Your input id).on('fileloaded', function (event, file, previewId, index, reader) { console.log(reader.result) } 

你可以从reader.result获取图像数据，试试吧