Of Stack

HTML5 js Drag and Upload File Function

  • 2021-07-10 18:17:19
  • OfStack

In the HTML5 pc above achieved quite a number of functions, work also used to drag upload, specially record this function

To trigger an event on the drag target (source element):

ondragstart-Triggered when the user starts dragging an element
ondrag-Triggered when an element is being dragged
ondragend-Triggered after user completes element dragging

Events triggered when the target is released:

ondragenter-This event is triggered when a mouse-dragged object enters the scope of its container
ondragover-This event is triggered when a dragged object is dragged within the scope of another 1 object container
ondragleave-This event is triggered when the mouse-dragged object is out of scope of its container
ondrop-This event is triggered when the mouse button is released during 1 drag

Upper code 


<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Drag and drop </title>
 <style>
  .box{width:800px;height:600px;float:left;}
  #box1{background-color:#ccc;}
  #box2{background-color:#000;}
 </style>
</head>
<body>
 <div id="box1" class="box"></div>
 <div id="box2" class="box"></div>
 <img id="img1" src="1.jpg">
 <div id="msg"></div>
</body>
<script>
var box1Div,box2Div,msgDiv,img1; 
window.onload = function(){
 box1Div = document.getElementById('box1');
 box2Div = document.getElementById('box2');
 msgDiv = document.getElementById('msg');
 img1 = document.getElementById('img1');
 box1Div.ondragover = function(e){e.preventDefault();}
 box2Div.ondragover = function(e){e.preventDefault();}

 img1.ondragstart = function(e){e.dataTransfer.setData('imgId','img1');}
 box1Div.ondrop = dropImghandler;
 box2Div.ondrop = dropImghandler;
}
function dropImghandler(e){
 showObj(e);// Get all the drag-and-drop information 
 showObj(e.dataTransfer);// Get a file 
 e.preventDefault();
 var img = document.getElementById(e.dataTransfer.getData('imgId'));
 e.target.appendChild(img);
}
function showObj(obj){
 var s = '';
 for(var k in obj){s += k+":"+obj[k]+"<br/>";}
 msgDiv.innerHTML = s;
}
</script>
</html>

This function is a way to drag pictures to the left and right div. I think it is useless and can be used as Harbin beer
The following is the drag upload code, which can be started after the backend PHP gets $_FILES 


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Drag-and-drop upload </title>
 <style>
  #imgContainer{background:#ccc;width:500px;height:500px;}
 </style>
</head>
<body>
 <div id="imgContainer"></div>
 <div id="msg"></div>
</body>
<script>
var imgContainer,msgDiv;
window.onload = function(e){
 imgContainer = document.getElementById('imgContainer');
 msgDiv = document.getElementById('msg');
 imgContainer.ondragover = function(e){
  e.preventDefault();
 }
 imgContainer.ondrop = function(e){
  e.preventDefault();
  var f = e.dataTransfer.files[0]; 
  // At this time, the file has been obtained. Which file do you want to use to process and send it yourself post Just request back-end processing! 

  // The following is the picture displayed after being acquired in imgContainer Process in 
  // var fileReader = new FileReader();
  // fileReader.onload=function(){
  // imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"
  // }
  // fileReader.readAsDataURL(f);
  // showObj(e); // Display uploaded information 
  // showObj(e.dataTransfer.files);
 }
}
function showObj(obj){
 var s = '';
 for(var k in obj){s += k+":"+obj[k]+"<br/>";}
 msgDiv.innerHTML = s;
}
</script>
</html>
Related articles: