js拖拽图片到浏览器

最新推荐文章于 2024-08-21 10:48:01 发布

菜汪在路上

最新推荐文章于 2024-08-21 10:48:01 发布

阅读量333

点赞数 1

本文链接：https://blog.csdn.net/qx020814/article/details/127805603

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 700px;
            height: 300px;
            border: 2px dashed black;
            overflow: hidden;
        }
    </style>
</head>
<body>
<h1>将图片拖拽到此</h1>
<div id="fileZone" ondrop="drop(event)">
			<span>
				<img/>
			</span>
</div>
</body>
</html>
<script>
    var ipt = document.getElementById("fileZone");
    ipt.ondragover = function () {
        return false; //当元素移动至此  关闭默认处理
    }

    //添加拖拽事件
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        e == e || window.event;//判断是浏览器图片还是电脑图片
        var files = e.dataTransfer.files;//获取拖拽的所有的文件
        for (var i = 0; i < files.length; i++) {
            var file = files[i];//获取每个文件
            if (file.type.indexOf("image") != -1) {//判断是否是图片
                var reader = new FileReader();//创建文件读取对象
                //读完回调事件
                reader.onload = function (f) {
                    var sp = document.createElement("span");
                    sp.innerHTML += '<img style="padding: 0px 10px;" width="200px"  src="' + this.result + '" alt="' + f.name + '"/>';
                    ipt.insertBefore(sp, null);//ipt内部追加sp
                }

                reader.readAsDataURL(file);//把图片读成Base64编码字符串
            }
        }
    }
</script>