简单的上传图片预览功能 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
            #box{width: 200px;height: 200px;background: black;margin: 200px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("box");
                var oUl=document.getElementById("ul");
              
                oDiv.ondragenter=function(){
                    this.style.background="red";
                }
                oDiv.ondragover=function(ev){
                    var ev=ev || window.event;
                    ev.preventDefault();
                }
                oDiv.ondragleave=function(){
                    this.style.background="black";
                }
                oDiv.ondrop=function(ev){
                 
                    ev.preventDefault();           //将外部图片拖进页面的时候默认会打开
                    var fs=ev.dataTransfer.files;      //获取文件列表
                    for(var i=0;i<fs.length;i++){
                        if(fs[i].type.indexOf('image')!=-1){       //文件列表的type属性        
                            var fd=new FileReader();                //创建读取文件的对象
                            fd.readAsDataURL(fs[i]);
                            fd.onload=function(){
                                var oLi=document.createElement('li');
                                var oImg=document.createElement('img');
                                oImg.src=this.result;
                                oLi.appendChild(oImg);
                                oUl.appendChild(oLi);
                            }
                        }else{
                            alert('请上传图片');
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="box"></div>
        <ul id="ul"></ul>
    </body>
</html>

 

posted @ 2016-12-13 16:01  rain92  阅读(203)  评论(0)    收藏  举报