H5实现拖拉上传文件

在HTML5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能

在拖动目标上触发事件 (源元素):

onDragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

上代码

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>
    

该功能是可以将图片拖拉到左右两个p中的方法，我觉得没啥用，可以当作哈啤

下面是拖拉上传代码，后端PHP获取到$_FILES之后就可以搞起来了

!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>
    

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

H5如何使用约束验证API

postMessage实现跨域、跨窗口消息传递

以上就是H5实现拖拉上传文件的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！