移动端输入框中展示图片

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

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

效果