如何獲取由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文件輸入插件創建的圖像數據

回答

相關問題