Question

我正在尝试使用ondragover和ondrop函数创建拖放功能以上传功能。

dropContainer.ondragover=dropContainer.ondragenter=function(evt) {
    evt.preventDefault();
};
dropContainer.ondrop=function(evt) { 
   if(evt.dataTransfer.files.length <= 1){
      wpUploadFile.files = evt.dataTransfer.files;
      evt.preventDefault();
   } else {
      alert("Please upload only one file.");
      evt.preventDefault();
   }
};

<input type='file' id='wpUploadFile'></input>
 
<div id='dropContainer' style='border: dashed 0.5px;border-bottom-right-radius: 14px;border-top-left-radius: 14px;background: #f9f9f9;text-align: center;padding: 6px;padding-bottom: 10px;width:600px'>
   <p id='dropContainerP'style='color:grey; font-size: 14px;padding: 2px;'>Drag And Drop File To Upload</p>
   <img src='cloud-upload1.png' style='height: 36px;margin-top: -23px;'></img>
</div>

我希望当我将文件拖放到dropContainer时，也应该将该文件分配给wpUploadFile（输入类型文件）。这段代码在chrome上运行正常，但在mozilla上却无法运行。 chrome版本：66.0.3359.139 mozilla firefox版本：65.0

请帮助提供解决方案以使其也可以在Firefox上运行。

拖放上传在Mozilla中不起作用

0 个答案: