只是一個(gè)簡(jiǎn)單的拖放不起作用！?。。。?！我使用了另一個(gè)堆棧溢出帖子中的拖放代碼。我試圖讓文件在被刪除時(shí)進(jìn)入文件輸入。其他代碼主要是風(fēng)格/或用于顯示文件名。<!DOCTYPE html><html><head> <link href="style.css" rel="stylesheet"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>File Upload</title></head><body> <div id="dropContainer"> Drag and drop a file <br> or <br> <input type="file" id="fileInput" hidden="hidden" /> <button id="fakeButton">Select a file</button> <span id="fileText">No file Selected</span> </div> <script> const dropContainer = document.getElementById("dropContainer"); const fileInput = document.getElementById("fileInput"); const fakeButton = document.getElementById("fakeButton"); const fileText = document.getElementById("fileText"); fakeButton.addEventListener("click", () => { fileInput.click(); }); // 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(); };
如何進(jìn)行拖放？
慕運(yùn)維8079593
2022-05-22 10:10:09
