移动端输入框中展示图片

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

秋英之空

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

阅读量385

点赞数

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

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

版权

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

摘要由CSDN通过智能技术生成

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

输入框第一反应是使用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>