Home >Web Front-end >H5 Tutorial >H5 realizes drag and drop uploading files

H5 realizes drag and drop uploading files

php中世界最好的语言Original: 2018-03-26 14:22:291944browse

This time I will bring you H5 to drag and drop to upload files. What are the precautions for H5 to drag and drop to upload files? The following is a practical case, let’s 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 events on the drag target (Source element):

ondragstart - Fires when the user starts dragging the element

ondrag - Fires when the element is being dragged

ondragend - Fires when the user completes Triggered after the element is dragged

Events triggered when the target is released:

ondragenter - when the object dragged by the mouse enters its container range This event is triggered when

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

ondragleave - When the object being dragged by the mouse leaves its container This event is triggered when within the range

ondrop - During a dragging process, this event is triggered when the mouse button is released

upper 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('box1');
    box2p = document.getElementById('box2');
    msgp = document.getElementById('msg');
    img1 = document.getElementById('img1');
    box1p.ondragover = function(e){e.preventDefault();}
    box2p.ondragover = function(e){e.preventDefault();}
    img1.ondragstart = function(e){e.dataTransfer.setData('imgId','img1');}
    box1p.ondrop = dropImghandler;
    box2p.ondrop = dropImghandler;
}
function dropImghandler(e){
    showObj(e);//获取拖放所有信息
    showObj(e.dataTransfer);//获取文件
    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/>";}
    msgp.innerHTML = s;
}
</script>
</html>

This function allows you to drag pictures I don’t think the methods in the two ps on the left and right are useful. They can be used as Harbin Beer

The following is the 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('imgContainer');
    msgp = document.getElementById('msg');
    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 = '';
    for(var k in obj){s += k+":"+obj[k]+"<br/>";}
    msgp.innerHTML = s;
}
</script>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

H5 realizes drag and drop uploading files

Related articles