如何获取由Bootstrap文件输入插件创建的图像数据

我有以下的div来完成选择和显示所选图像，更改图像并取消它的工作。所有这些都由Bootstrap File Input插件完成。如何获取由Bootstrap文件输入插件创建的图像数据

<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发送到我的节点服务器，并将该图像保存在服务器上的文件夹中。

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

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

来源

2014-10-22 skip

你好，你找到一个可行的解决方案吗？我有同样的问题，需要找回刚创建的图像。 – kxc 2015-04-18 09:31:08

创建表单数据并附加所有文件。

var formData = new FormData(); 

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

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

来源

2015-02-05 23:20:33 user2489395

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

你可以从reader.result得到的图像数据，只是尝试

来源

2016-12-28 07:46:04

如何获取由Bootstrap文件输入插件创建的图像数据

回答

相关问题