![imgLoad]( "imgLoad")
我在下面有这个JavaScript代码，在这里我想为图像文件创建混合输入方法：将其拖放并由文件浏览器选择。放置完美，但如果尝试使用文件资源管理器上传文件，则不会显示。我认为imgLoad()中有一些东西，因为无论我怎么放（即使使用不同的函数调用方法），在change事件中运行它时都不会加载。var obje=document.getElementById('toDrop');var fileDoor=document.getElementById('fileImg');obje.ondragover=function(ev) { ev.preventDefault();}obje.ondrop=function imgLoad(eve) { eve.preventDefault(); var fil=new FileReader(); fil.onload=function(ev) { document.getElementById('toDrop').style.backgroundImage="url('"+ev.target.result+"')"; } fil.readAsDataURL(eve.dataTransfer.files[0]); } fileDoor.onchange=imgLoad();此处演示：https://jsfiddle.net/vtsvr4sa/1/ 最佳答案 imgLoad不是Question处Javascript的全局定义函数。您还将在imgLoad上立即调用fileDoor.onchange=imgLoad()，而不是引用函数fileDoor.onchange=imgLoad。change事件没有.dataTransfer属性。使用OR event.dataTransfer.files运算符在event.target.files处理程序中处理imgLoad或||。调整HTML以将<input type="file">元素用作drop事件目标。将<input type="file">元素CSS设置为与父元素相同的width和height，将opacity设置为0，将position设置为absolute，并且将top设置为父元素.ingConf 值<!DOCTYPE html><html><head> <style>.imgConf { height: 150px; width: 150px; border-radius: 100%; margin: 20px; background-size: 100% 100%; text-align: center; background-repeat: no-repeat; background-size: 100% 100%;}.imgConf>label { font-size: 15px; background-color: rgba(255, 250, 205, 0.5); margin-top: 40%; width: 80px; border-radius: 3px;}.imgConf input { top: 0; opacity: 0; width: 150px; height: 150px; display: block; position: absolute;} </style></head><body> <div class='imgConf' id='toDrop'>Click or drop image here<input type="file" accept="image/*" id='fileImg' name="profilePh"> </div> <script>var obje = document.getElementById('toDrop');var fileDoor = document.getElementById('fileImg');function imgLoad(eve) { var fil = new FileReader(); fil.onload = function(ev) { obje.style.backgroundImage = `url(${ev.target.result})`; } fil.readAsDataURL(eve.target.files[0] || eve.dataTransfer.files[0]);}fileDoor.onchange = imgLoad;fileDoor.ondrop = imgLoad;fileDoor.ondragover = function(e) { e.preventDefault()} </script></body></html> 07-28 06:38