如何将图像传递到html textarea [英] How to pass an image into a html textarea
问题描述
我想知道如何将图像从图像库传递到html-textarea。我应该使用jQuery / JavaScript，你知道这个函数的一些很好的教程吗？
在选择器中
< input type =file../>
您可以通过使用图像数据（base64编码字符串）将图像标记传递给位于可编辑div内的图像标记文件阅读器api。
完整示例：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://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;边框：1px纯灰色;字体：中等-moz-fixed;字体：-webkit-small-control;身高：28px;溢出：自动; padding：2px;调整大小：两者; width = 400px;}< / style>< body>< input class =filetype ='file'id =imgSel/>< div id =textareacontenteditable> < img contenteditable =falsestyle =width：45pxid =myimg/>我看起来像一个textarea< / div>< script type =text / javascript>函数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（）{//设置一个通用的类readURL（this）;
$ b $
如何制作和编辑div看起来像一个textarea元素：
#textarea {-moz-appearance：textfield-multiline; -webkit-appearance：textarea;边框：1px纯灰色;字体：中等-moz-fixed;字体：-webkit-small-control;身高：118px;溢出：自动; padding：2px;调整大小：两者; width：400px;}
< div id =textarea contenteditable> < img contenteditable =falsesrc =https://upload.wikimedia.org/wikipedia/commons/6/6a/Koala-ag1.jpgwidth =120height =100/>我看起来像一个textarea< / div>
em> contenteditable =false元素使其无法编辑。
https://jsfiddle.net/ThinkingStiff/AbKTQ/
I'm wondering how to pass an image from an image-gallery into a html-textarea. Should i use jquery/javascript and do you know some good tutorial on this function?
After choosing an image via os built-in selector
<input type="file"../>
you can pass image data(base64 encoded string) to an image tag located within a editable div by using file reader api.
Full example:
<!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>
How to make and editable div look like a textarea element:
#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>
you can set contenteditable="false" on img element to make it not editable.
https://jsfiddle.net/ThinkingStiff/AbKTQ/
这篇关于如何将图像传递到html textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
