欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5拖拉上传文件的简单实例

程序员文章站 2023-11-23 22:10:58
本篇文章主要介绍了HTML5拖拉上传文件的简单实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ... 17-01-11...

在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>
    <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);//获取拖放所有信息
    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/>";}
    msgdiv.innerhtml = s;
}
</script>
</html>

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

下面是拖拉上传代码,后端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>
    <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];   
        //这时已经获取到文件了,具体想要用第几个文件自己处理,发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/>";}
    msgdiv.innerhtml = s;
}
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。