拖拽批量处理文件

最新推荐文章于 2022-09-16 10:37:49 发布

错_对

最新推荐文章于 2022-09-16 10:37:49 发布

阅读量2.4k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/Free_Program_1314/article/details/48003089

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        #div1{
            margin: 0 auto;
            width:200px;
            height:200px;
            background:#ccc;
            color: white;}
        #div1 p{
            position: relative;
            top: 90px;
            left: 50px;
        }
        #ul1{width:1000px; }
        li{ width:100px; height:100px; margin:5px; float:left; list-style:none; margin-left: 10px;}
        li img{ width:100px;height: 100px;}
    </style>
    <script type="text/javascript">

        window.onload = function(){

            var oUl = document.getElementById('ul1');
            var oDiv = document.getElementById('div1');

            oDiv.ondragenter = function(){
                this.innerHTML = '可以释放';
            };

            oDiv.ondragover = function(ev){
                this.innerHTML='请释放';
                ev.preventDefault();
            };

            oDiv.ondragleave = function(){
                this.innerHTML = '请拖拽到此区域';
            };

            oDiv.ondrop = function(ev){

                ev.preventDefault();

                var fs = ev.dataTransfer.files;

                for(var i=0;i<fs.length;i++){

                    var fr = new FileReader();

                    if( fs[i].type.indexOf('image')!=-1 ){

                        fr.readAsDataURL( fs[i] );

                        fr.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="div1"><p>请拖拽到此区域</p></div>
<ul id="ul1"></ul>
</body

错_对

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽批量处理文件

无标题文档 #div1{ margin: 0 auto; width:200px; height:200px; background:#ccc; color: white;} #div1 p{ position:
复制链接

扫一扫