html中拖放文件,将拖放文件拖放到标准html文件输入中

小编典典

以下内容适用于Chrome和FF，但我还没有找到涵盖IE10 +的解决方案：

// dragover and dragenter events need to have 'preventDefault' called

// in order for the 'drop' event to register.

// See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets

dropContainer.ondragover = dropContainer.ondragenter = function(evt) {

evt.preventDefault();

};

dropContainer.ondrop = function(evt) {

// pretty simple -- but not for IE :(

fileInput.files = evt.dataTransfer.files;

// If you want to use some of the dropped files

const dT = new DataTransfer();

dT.items.add(evt.dataTransfer.files[0]);

dT.items.add(evt.dataTransfer.files[3]);

fileInput.files = dT.files;

evt.preventDefault();

};

Drop Here

Should update here:

您可能想要使用addEventListener或jQuery(等)注册您的evt处理程序-这只是为了简便起见。

2020-05-10