在[img] base64 [/ img]標記中插入readAsDataURL

Question

我的代碼，我有Jquery：

<div class="form-row">          
<input class="form-group col-md-6" id="fileinput" type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this);" />
</div>
<div class="form-group">
<label for="content">Message</label>
<textarea id="content" name="content" rows="10" class="form-control" placeholder="Écrivez un message ..."></textarea>
</div>

<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#fileinput").attr("src", e.target.result);
$("#content").val(e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}   
</script>

我想在bbcode編輯器中添加base64 img（textarea是#content）。 其實是工作，但我想要這個：

[IMG]的數據：圖像/ PNG; BASE64，iVBORw0KGgoAAAAN ... [/ IMG]

謝謝。

Answer 1

假設您已按照腳本的建議成功地包含了jQuery，並且HTML看起來像這樣（簡化）：

<html>
  <body>
    <input type="file" id="file"/>
    <img id="content"/>
  </body>
</html>

然后像這樣的腳本將執行您想要的操作：

$(function() {
  function readURL() {
    // Grabbing the DOM object, so that the code follows your general pattern
    input = $(this)[0];
    if (input.files && input.files.length) {
      var reader = new FileReader();
      reader.onload = function () {
        // The attribute you want to change on an img tag is "src" not "val"
        $("#content").attr("src", reader.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
  // Bind the readURL function to the change event on our file input
  $("#file").change(readURL);
});

在[img] base64 [/ img]標記中插入readAsDataURL

問題描述

1 個解決方案

解決方案1
0 2018-12-05 04:08:22

在[img] base64 [/ img]標記中插入readAsDataURL

問題描述

1 個解決方案

解決方案1 0 2018-12-05 04:08:22

解決方案1
0 2018-12-05 04:08:22