Home > Article > Web Front-end > HTML5 drag and drop upload file sample code sharing

HTML5 drag and drop upload file sample code sharing

黄舟Original: 2017-03-13 17:24:321501browse

This article mainlyintroduces HTML5a simple example of dragging and uploading files. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

I have implemented quite a lot of functions on the HTML5 PC. I also use drag and drop uploading at work. I specially recorded this function.

Trigger an event on the drag target (source element):

ondragstart - triggers when the user starts dragging the element

ondrag - triggers when the element is being dragged

ondragend - Triggered after the user completes dragging the element

Event triggered when the target is released:

ondragenter - When dragged by the mouse This event is triggered when the moving object enters the scope of its container

ondragover - This event is triggered when a dragged object is dragged within the scope of another object's container

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

Above code

<html lang="en">
<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>
    <p id="box1" class="box"></p>
    <p id="box2" class="box"></p>
    <img id="img1" src="1.jpg">
    <p id="msg"></p>
</body>
<script>
var box1p,box2p,msgp,img1; 
window.onload = function(){
    box1p = document.getElementById(&#39;box1&#39;);
    box2p = document.getElementById(&#39;box2&#39;);
    msgp = document.getElementById(&#39;msg&#39;);
    img1 = document.getElementById(&#39;img1&#39;);
    box1p.ondragover = function(e){e.preventDefault();}
    box2p.ondragover = function(e){e.preventDefault();}

    img1.ondragstart = function(e){e.dataTransfer.setData(&#39;imgId&#39;,&#39;img1&#39;);}
    box1p.ondrop = dropImghandler;
    box2p.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/>";}
    msgp.innerHTML = s;
}
</script>
</html>

This function is a method for dragging pictures to the left and right p. I don’t think it is useful. It can be used as a Harbin Beer

below It is a drag and drop upload code. After the back-end PHP obtains $_FILES, it can be started

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放上传</title>
    <style>
        #imgContainer{background:#ccc;width:500px;height:500px;}
    </style>
</head>
<body>
    <p id="imgContainer"></p>
    <p id="msg"></p>
</body>
<script>
var imgContainer,msgp;
window.onload = function(e){
    imgContainer = document.getElementById(&#39;imgContainer&#39;);
    msgp = 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/>";}
    msgp.innerHTML = s;
}
</script>
</html>

The above is the detailed content of HTML5 drag and drop upload file sample code sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sample code for detailed analysis of H5 WeChat playback full-screen problemNext article：Sample code for detailed analysis of H5 WeChat playback full-screen problem

See more

HTML5 drag and drop upload file sample code sharing

Related articles