HTML5 中拖拉上传的注意事项及触发事件全解析

大家好今天就教你们一招超简单有用的妙技——H5拖拉上传文件！这功能就像是让我们可以把电脑上的文件像拖照片一样自动传上网页上，挺炫酷？那就让我来给大家详细介绍下这个神奇的功能。

一、H5拖拉上传文件是个啥？

讲的简单点儿，H5拖拽上传文件，就是用HTML5的新功能，你可以直接拖动电脑上的文件放到网页需要的地方去，网页就帮你把文件传上去了。操作简单不说，享受感也提高很多，再也不用找文件，选文件，上传那么麻烦，直接拖一下就成，多省事儿！

二、拖拉上传的几个关键步骤

搞定这事儿其实就几步。首先，当你开始拖动文件，网页就会触发一个叫`ondragstart`的事件；接着，在你拖动的时候，还有个`ondrag`事件会不停地告诉你文件还在拖动呢；最后，当你放手让文件落在网页上，就会触发`ondragend`事件，表示拖动完成。虽然听着有点儿绕，但做起来真的不难！

三、拖放区域的那些事儿

要说拖放区的事儿，得说几件关键点儿的事情。比如说那个`ondragenter`，这就是当文件进了拖放区时发生的，它就像个信号灯一样告诉我们文件到位了。然后是那个`ondragover`，这就是文件在拖放区里晃悠的时候发生的。要是文件从拖放区出去了，那就会触发`ondragleave`事件。最后，如果文件真的被放下了，那就会触发`ondrop`事件，到这儿咱们就可以开始上传文件！

四、实战演练：写代码！

搞定！说得再多，理论始终是理论，还是得多动手实践才行。下面咱们就来写点儿代码实现拖拉上传功能。首先，得在网页上画张方块儿，搞成能接收文件的地方，俗称“容器”。接着，给它照着前面讲过的方法绑定几个事件。别怕编程，其实只要按部就班地做，你会发现比想像中的容易多了。

五、后端接收到文件后怎么处理？

上传了文件到网上之后，别忘了我们还要搞定后端怎么处理这些文件。通常情况下，后端会利用PHP这个工具来接手这些文件，然后你就可以用`$_FILES`这个变量去查看它们。至于如何处理这堆文件，那方法可多着，比如存到服务器上，或者直接发到别的地方去。虽然这部分不归咱们前端管，但是也不能忽视！

    
    
    
        .box{width:800px;height:600px;float:left;}
        #box1{background-color:#ccc;}
        #box2{background-color:#000;}
    
    
    
    
    

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]+"
";}
    msgp.innerHTML = s;
}

六、拖拉上传文件的注意事项

即使拖着传文件确实省事儿，不过有些事儿还得留神儿。比如说，得保证拖拽区够醒目，这样大家才会知道这儿能扔文件进来；再者，就是上传文件的安全性得把握住，别让那些危险的东西钻了空子。其实这都是小事儿，但是涉及到用户感受跟网站安稳，那可是大事儿。

七、实际应用中的感受

我用过这功能，挺好使的。以前传东西得找文件夹、选文件，现在直接拖过来就能搞定，省时多了。再说，新界面更好看，显得专业。有人可能觉得这功能有点儿花里胡哨，其实挺实用的。

八、结语：大家一起来试试！

nbsp;html>
    
    
    
        #imgContainer{background:#ccc;width:500px;height:500px;}
    
    
    

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 = ""
        // }
        // fileReader.readAsDataURL(f);
        // showObj(e);   //显示上传信息
        // showObj(e.dataTransfer.files);
    }
}
function showObj(obj){
    var s = '';
    for(var k in obj){s += k+":"+obj[k]+"
";}
    msgp.innerHTML = s;
}

好了，聊完了关于H5拖拉上传文件的事儿。你们觉得这玩意儿咋样呀？想不想玩一下？心动不如行动赶紧试起来！要是还有啥疑问或想法，就在下方留言说说呗。别忘了给我点个赞，顺便分享出去，让更多小伙伴们都知道这个小妙招！