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 File Input プラグインimgは、画像のデータを保持する次の要素を作成します。そのデータが必要なので、AngularJS を使用してそのデータをノード サーバーに送信し、その画像をサーバーのフォルダー内に保存できます。

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

AngularJS を使用して Bootstrap File Input によって動的に生成されdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAA3=...た画像データを取得するのを手伝ってくれる人はいますか?

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 に答える