Question

我在下面有这个javascript代码，我想为图像文件制作混合输入法：删除它并通过文件浏览器选择。

drop完美无缺，但如果您尝试使用文件资源管理器上传文件，则无法显示。我认为是imgLoad()内部的东西，因为当我在更改事件中运行它时不加载，无论我怎么推（甚至使用不同的函数调用方法）。

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/

Answer 1

imgLoad不是Javascript at Question的全局定义函数。您还在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设置为{{ 1}}，absolute设置为父元素top .ingConf值

top

图像

1 个答案: