如何将图像传递到 html textarea [关闭]答案

【问题标题】：How to pass an image into a html textarea [closed]如何将图像传递到 html textarea [关闭]
【发布时间】：2015-05-16 19:06:27
【问题描述】：

我想知道如何将图像从图像库传递到 html-textarea。我应该使用 jquery/javascript，你知道关于这个功能的一些好的教程吗？

【问题讨论】：

你不能显示一些你的代码吗？
没有。不幸的是不是因为我在我的手机上。但也因为我没有任何代码，因为我不知道从哪里开始编写函数代码。

标签： javascript php jquery html

【解决方案1】：

通过os内置选择器选择图片后

<input type="file"../>

您可以使用文件阅读器 api 将图像数据（base64 编码字符串）传递到位于可编辑 div 内的图像标签。

完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>
<style>

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

</style>
<body>

<input class="file" type='file' id="imgSel" />

<div id="textarea" contenteditable>

  <img contenteditable="false" style="width:45px" id="myimg" />
  I look like a textarea

</div>

<script type="text/javascript">

    function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('myimg').setAttribute('src',e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }


    document.getElementById('imgSel').onchange = function () { //set up a common class
        readURL(this);
    };


</script>

</body>

</html>

如何让可编辑的 div 看起来像一个 textarea 元素：

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 118px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<div id="textarea" contenteditable>
  
  <img contenteditable="false" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Koala-ag1.jpg" width="120" height="100"/>
  
  I look like a textarea</div>

您可以在 img 元素上设置 contenteditable="false" 使其不可编辑。

https://jsfiddle.net/ThinkingStiff/AbKTQ/

【讨论】：

我会尽快检查这个解决方案:)
现在它看起来真的像一个 textarea:)
如果这是我正在寻找的解决方案，我不知道。如果我写一篇博文并想在帖子中包含一些图像内容。我想要做的是点击一些按钮，比如“插入图片”，然后我可以选择一个图片来点击，然后图片将被传递到文本区域。
它仍然不是文本区域，而是可编辑的 div，但我希望它能满足您的要求 :)
好吧...希望如此:) :)