拖拽上传以及文件上传

最新推荐文章于 2025-03-27 18:54:09 发布

cslazsb

最新推荐文章于 2025-03-27 18:54:09 发布

阅读量696

点赞数

文章标签： html5 javascript html

本文链接：https://blog.youkuaiyun.com/cslazsb/article/details/120310814

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //将文件拖到div盒子 图片在div显示
        //要给div加拖拽事件 监听dragover 看是否有东西拖拽进来 
        //获取元素
        let div = document.querySelector('div')
        div.addEventListener('dragover',function(e){
            //测试内容
            e.preventDefault()
            //div.style.background = 'orange'
        })
        // 给div加drop 监听拖拽元素是否落下
        div.addEventListener('drop',function(e){
            //因为拖拽图片 浏览器默认图片在新窗口打开 我们需要阻止默认行为
            
            //测试内容
            //console.log('123')
            //文件落下 我们需要文件的信息 通过事件对象找
            console.log( e.dataTransfer.files[0])
            //实例化
            let reader = new FileReader ()
            reader.readAsDataURL (e.dataTransfer.files[0])
            reader.addEventListener('load',function(){
                //创建img
                let img = document.createElement('img')
                //插入div
                div.appendChild(img)
                img.src = this.result
            })
            e.preventDefault()
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		div {
			width: 200px;
			height: 200px;
			background: red;
		}

	</style>
</head>
<body>

	<input type="file">
	<div></div>
	


	<script type="text/javascript">
			
		// 点击上传，在div中显示图片
		// 获取
		let file = document.querySelector('input');
		let div = document.querySelector('div');


		file.addEventListener('change', function () {
			// this.files：伪数组
			// console.log( this.files[0] );
			// 读取文件：
			// 实例化
            //console.dir(file);
			let reader = new FileReader();
			//console.dir(reader);
			// 读取文件：base 64编码格式
			reader.readAsDataURL(this.files[0]);

			// 等读取完成之后，就会的到这个编码格式
			reader.addEventListener('load', function () {
				// console.log(this.result);
				// 创建img
				let img = document.createElement('img');

				// 追加到div
				div.appendChild(img);

				// 设置
				img.src = this.result;
			});

		});




	</script>


	
</body>
</html>