HTML5 js implements drag-and-drop file upload function-H5 Tutorial-php.cn

HTML5 js implements drag-and-drop file upload function

高洛峰

Release： 2017-01-12 17:09:20

Original

1490 people have browsed it

A lot of functions have been implemented on the HTML5 PC, and drag and drop uploading is also used in the work. I specially recorded this function

Trigger events (source elements) on the drag target:

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

Triggered when the target is released Events:

ondragenter - This event is triggered when the object being dragged by the mouse enters the scope of its container
ondragover - When a dragged object is dragged within the scope of another object's container This event is triggered when moving
ondragleave - This event is triggered when the object being dragged by the mouse leaves the scope of its container
ondrop - This event is triggered when the mouse button is released during a dragging process

上码

<html>
<head>
  <meta charset="UTF-8">
  <title>拖拽</title>
  <style>
    .box{width:800px;height:600px;float:left;}
    #box1{background-color:#ccc;}
    #box2{background-color:#000;}
  </style>
</head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <img id="img1" src="1.jpg">
  <div id="msg"></div>
</body>
<script>
var box1Div,box2Div,msgDiv,img1; 
window.onload = function(){
  box1Div = document.getElementById(&#39;box1&#39;);
  box2Div = document.getElementById(&#39;box2&#39;);
  msgDiv = document.getElementById(&#39;msg&#39;);
  img1 = document.getElementById(&#39;img1&#39;);
  box1Div.ondragover = function(e){e.preventDefault();}
  box2Div.ondragover = function(e){e.preventDefault();}
 
  img1.ondragstart = function(e){e.dataTransfer.setData(&#39;imgId&#39;,&#39;img1&#39;);}
  box1Div.ondrop = dropImghandler;
  box2Div.ondrop = dropImghandler;
}
function dropImghandler(e){
  showObj(e);//获取拖放所有信息
  showObj(e.dataTransfer);//获取文件
  e.preventDefault();
  var img = document.getElementById(e.dataTransfer.getData(&#39;imgId&#39;));
  e.target.appendChild(img);
}
function showObj(obj){
  var s = &#39;&#39;;
  for(var k in obj){s += k+":"+obj[k]+"<br/>";}
  msgDiv.innerHTML = s;
}
</script>
</html>

Copy after login

This function is a method for dragging images into the left and right divs. I don’t think it is useful. It can be used as Harbin Beer
The following is the drag and drop upload code, which is obtained by back-end PHP After getting to $_FILES, you can start it

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>拖放上传</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(&#39;imgContainer&#39;);
  msgDiv = document.getElementById(&#39;msg&#39;);
  imgContainer.ondragover = function(e){
    e.preventDefault();
  }
  imgContainer.ondrop = function(e){
    e.preventDefault();
    var f = e.dataTransfer.files[0];  
    //这时已经获取到文件了，具体想要用第几个文件自己处理，发post请求后端处理就行了！
 
    //下面是图片获取到之后显示在imgContainer中的流程
    // var fileReader = new FileReader();
    // fileReader.onload=function(){
    // imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"
    // }
    // fileReader.readAsDataURL(f);
    // showObj(e);  //显示上传信息
    // showObj(e.dataTransfer.files);
  }
}
function showObj(obj){
  var s = &#39;&#39;;
  for(var k in obj){s += k+":"+obj[k]+"<br/>";}
  msgDiv.innerHTML = s;
}
</script>
</html>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

For more articles related to HTML5 js implementation of drag-and-drop file upload function, please pay attention to the PHP Chinese website!