All geek questions in one place

IE 10 drag and drop still open file, although there is a dragover event

in IE 10, every time I drag and drop a file into a downloadable file, it still opens the file. how to prevent it? I am embarrassed. Please help. Is there a reason for dragging "to the file upload field" instead of creating another reset area for the div tag? Is there a way to make it work in the download field?

<div id="dnd-upload-box"> <img id="image" src="https://upload.dev/img/elements/drag_drop.jpg" width="100%" height="100%"/> <?php echo $this->Form->input('files', array( 'id' => 'file-input-0', 'class' => 'file-input', 'type' => 'file', 'multiple' => 'multiple', 'name' => 'fileselect[]', 'onChange' => 'getFiles(this);' )); ?> </div> <script type="text/javascript"> // call initialization file $(document).ready(function() { Init(); }); // getElementById function $id(id) { return document.getElementById(id); } // initialize function Init() { var filed = $id("file-input-0"); filed.addEventListener("dragenter", FileDragHover, false); filed.addEventListener("dragover", FileDragHover, false); filed.addEventListener("dragleave", FileDragHover, false); //filed.addEventListener("drop", FileSelectHandler, false); } function FileSelectHandler(e) { // cancel event and hover styling console.log("selecthandler"); FileDragHover(e); getFiles(e); } // file drag hover function FileDragHover(e) { console.log("draghover"); e.stopPropagation(); e.preventDefault(); e.target.className = (e.type == "dragover" ? "hover" : ""); } </script>
+4
source share
2 answers

The following HTML file is a complete, minimal working example for IE. (Sorry for the missing <html> / <body> / etc. Template, but you don't need this for testing.)

As the MSDN documentation mentioned, you need to prevent the default operations in the dragover event. Only then will the drop event occur, containing the file in the event parameter.

 <input id="testfilefield" type="file" style="background-color: #777; width:300px; height: 100px;"> <script> window.addEventListener('load', function() { var el = document.getElementById('testfilefield'); // Block the "dragover" event el.addEventListener('dragover', function(e) { e.stopPropagation(); e.preventDefault(); }, false); // Handle the "drop" event el.addEventListener('drop', function(e) { var firstFile = e.dataTransfer.files[0]; console.log(firstFile); alert('Drop!'); }, false); }, false); </script>
+3
source

In your code, I do not see that you are handling the drop event? As Microsoft states in its development guide , you need to handle the drop event:

 function dropHandler(event) { event.stopPropagation(); event.preventDefault(); // Get the file(s) that are dropped. var filelist = event.dataTransfer.files; if (!filelist) return; // if null, exit now var filecount = filelist.length; // get number of dropped files if (filecount > 0) { // Do something with the files. } }
-1
source

Source: https://habr.com/ru/post/1485714/

More articles:


All Articles