移动端输入框中展示图片

最新推荐文章于 2024-01-06 20:30:00 发布

秋英之空

最新推荐文章于 2024-01-06 20:30:00 发布

阅读量408

点赞数

分类专栏： h5 文章标签： javascript css html5

本文链接：https://blog.csdn.net/qq_38152997/article/details/107009224

版权

h5 专栏收录该内容

1 篇文章

订阅专栏

在移动端开发中，遇到一个需求：输入框内显示选择的图片。通过研究发现，常规的`input`元素无法实现此功能，而可以利用`div`的`contenteditable`属性将其变为可编辑区域。设置`contenteditable="true"`后，再调整相关样式，配合JavaScript代码，即可实现在输入框内显示图片的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写移动端需求中需要输入框中展示选择后的图片，查了资料后找到了想要的效果

输入框第一反应是使用input但是input中无法展示图片原来div有个contenteidtable 属性设置为true div就可编辑了

  <div  class="txtcontent" 
        contenteditable="true" 
     >
  </div>
<input id="uploadFile" type="file"   accept="image/*" />
<div className="btn-upload">
    <label for="uploadFile">上传图片</label>
</div>

调整下样式

#uploadFile{
				display: none
			}
/* div文本框 */
.txtcontent {
  position: absolute;
  border-radius: 6px;
  background-color: white;
  height: 250px;
  text-align: inherit;
  margin: auto;
  top: 100px;
  width: 95%;
  left: 10px;
  color: rgb(153, 166, 191);
  font-size: 13px;
  font-style: inherit;
  /* 设置字体距离顶部的距离 */
  line-height: 30px;
  /* 设置字体向右移动 */
  /* 设置字体之间的间距 */
  letter-spacing: 1px;
  overflow: auto;
  word-break: break-all;
  outline: none;
  user-select: text;
  white-space: pre-wrap;
  text-align: left;
}

JS代码部分

 let a =document.querySelector('#uploadFile');
    let b = document.querySelector('.txtcontent');
			var files;
			console.log(1111,a)
	a.addEventListener('change', function(event) {
            event || (event = window.event);
            console.log(event);
            files = event.target.files[0];
         var url  = window.URL || window.webkitURL;
            let img = document.createElement('img');
            img.src = url.createObjectURL(files);
            img.style="width:30%;height:30%"
           b.appendChild(img);
        });

效果
在这里插入图片描述