图片拖拽上传

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="html5/js/jquery-2.0.0.min.js"></script>
    </head>
    <body>
        <div name="image" id="dropbox" style="position:relative;min-300px;min-height:100px;text-align: center;line-height:100px;color:#777;font-size:32px;border:3px dashed silver;">
            <input style="color:#fff;100%;height:100px;margin:0px auto;cursor:pointer;position:absolute;top:0px;right:0px;opacity:0;filter: alpha(opacity=0);" id="myfile" name="myfile" type="file"  >                
            请拖拽图片放到这里
        </div> 
        <div style=" 250px;height: 250px;">
            <img id="showimg"  style="min- 250px;height: 250px;" src="" />
            <p id="inofimg" style=" 150px;height: 50px;"></p>
        </div>
    </body>
    <script type="text/javascript">
            $(function(){ 
                $(document).on({ 
                    dragleave:function(e){    
                        e.preventDefault(); 
                    }, 
                    drop:function(e){ 
                        e.preventDefault(); 
                    }, 
                    dragenter:function(e){   
                        e.preventDefault(); 
                    }, 
                    dragover:function(e){    
                        e.preventDefault(); 
                    } 
                }); 
                var dropboxfile  = document.getElementById("dropbox");
                dropboxfile.addEventListener('drop',function(e){
                    e.preventDefault();
                    var fileList = e.dataTransfer.files;
                    var fileNum = fileList.length;
                    if(fileNum==0){
                        return false;
                    }
                    if(fileList[0].type.indexOf('image')=== -1){
                        alert('该文件不是图片');
                        return false;
                    }
                    var imgurl  = window.URL.createObjectURL(fileList[0]);
                    var imgname  = fileList[0].name;
                    var imgsize = Math.floor((fileList[0].size)/1024);
                    if(imgsize>1024){
                        alert('文件大小不能超过1M');
                        return false;
                    }
                    var info = "<span>文件名'"+imgname+"'</span><span>文件大小'"+imgsize+"'kb</span>";
                    $("#showimg").attr('src',imgurl); 
                    $("#inofimg").html(info); 
                })
            }); 
    </script>
</html>
这里主要用到三个一个是html5的这个几个拖动dragleave，drop，dragenter，dragover，二是addEventListener监听，三个是html5的file的API