Question

我正试图允许用户单击文件上传按钮，选择一个文件，并让该文件立即显示，无论他们在内容可编辑的div中键入什么位置。我有一个不一致的解决方案，并且似乎取决于单击文件上传之前聚焦于哪个元素。

这类似于此问题，除了我无法获得建议的解决方案以可靠地工作：

insert image inside a contenteditable div

这是一个有时会起作用的示例，但是每次运行时，都很难预测图像是否会显示。我正在努力使这项工作可靠。

请注意，我单击的是标签，而不是输入元素，这将触发同一事件。使用input元素进行的上传似乎更可靠，尽管理想情况下，我希望使label元素能够正常工作，因为它更易于设置样式。

function pasteImage() {
	document.getElementById("output").focus();
	var reader = new FileReader();
  reader.onload = function(e) {
  	document.getElementById("output").focus();
  	document.execCommand('insertImage', false, e.target.result);
  }
  reader.readAsDataURL(document.getElementById("input").files[0]);
}

document.getElementById("input").addEventListener('input', pasteImage);
document.getElementById("output").focus();

input {
  opacity: 0;
}

<label for="input">Upload Photo</label>
<input id="input" type="file" accept="image/*">
<div id="output" tabindex="0" contenteditable="true">Editable Content</div>

我希望每次单击“上传图像”并从硬盘驱动器中选择一个图像时，该图像都会在contenteditable div中可见。有时可以，但是如果我反复运行小提琴并再次尝试上载，则失败的时间约为一半。这个结果在小提琴和我在其上开发的本地html页面上都是一致的，因此它不仅是小提琴的人工产物。

Answer 1

Firefox：

我可以按任意顺序连续上传任意数量的照片，这对我没有任何影响任何事情

Chrome浏览器：

当上传诸如 pic1-pic1-pic1-pic1 之类的序列时，仅上传第一张图片。

当上传诸如 pic1-pic2-pic1-pic2 之类的序列时，所有图片均被上传。

上传类似 pic1-pic1-pic2 -pic2 的序列时，会上传 pic1 的第一个实例，而 pic2的第一个实例 em>已上传

IE

Chrome浏览器中发生的相同情况也适用于Internet Explorer ...

我不认为这是一个可编辑的问题，因为它得到了广泛的支持：

https://caniuse.com/#feat=contenteditable

这使我得出结论，这是一个浏览器问题。

如何将来自文件输入的图像插入到contenteditable div中？

1 个答案: