浏览器拖拽上传文件
1. 使用 div 标签，然后通过 addEventListener 监听拖拽文件
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.drag-area {
width: 500px;
height: 500px;
border: 1px solid #0f0;
}
.show {
width: 500px;
height: 500px;
border: 1px solid #0ff;
}
</style>
</head>
<body>
<div class="drag-area">
拖拽区域
</div>
<div class="show">
展示区域
</div>
<script>
(function() {
// 识别指定区域的拖动效果
var localDragFile = function() {
let localDragArea = document.querySelector('.drag-area')
localDragArea.addEventListener('dragover',function(e){
// 禁止浏览器打开拖拽的图片
e.preventDefault()
})
localDragArea.addEventListener('drop', function(e) {
// 禁止浏览器打开拖拽的图片
e.preventDefault()
var file = e.dataTransfer.files[0]
handleFileInfo(file)
})
}
// 使用 FileReader 读取文件的数据
var handleFileInfo = function(file) {
let reader = new FileReader()
reader.onloadend = function() {
var file_info = this.result
console.log("file_info = ", file_info);
document.querySelector('.show').innerHTML = `
<img src="${file_info}" style="width: 100%; height: 100%" alt="要展示的图片"/>
`
}
reader.readAsDataURL(file)
/*
readAsArrayBuffer() // 读取完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
readAsBinaryString() // 读取完成，result 属性中将包含所读取文件的原始二进制数据。
readAsDataURL() // 读取完成，result 属性中将包含一个 data: URL 格式的 Base64 字符串以表示所读取文件的内容。
readAsText() // 读取完成，result 属性中将包含一个字符串以表示所读取的文件内容。
*/
}
var __main = function() {
// 识别指定区域的拖动效果
localDragFile()
}
__main()
})()
</script>
</body>
</html>
2. 使用 input 标签来识别拖拽文件
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
}
.click-drag-area {
width: 500px;
height: 500px;
border: 1px solid #0f0;
}
.show {
width: 500px;
height: 500px;
border: 1px solid #0ff;
}
</style>
</head>
<body>
<input type="file" class="click-drag-area" />
<div class="show">
展示区域
</div>
<script>
(function() {
// 识别指定区域的拖动效果
var handleInputFileTag = function() {
document.querySelector('.click-drag-area').addEventListener('change', function(e) {
console.log("e = ", e);
console.log("this = ", this);
var file = this.files[0]
handleFileInfo(file)
})
}
// 使用 FileReader 读取文件的数据
var handleFileInfo = function(file) {
let reader = new FileReader()
reader.onloadend = function() {
var file_info = this.result
console.log("file_info = ", file_info);
document.querySelector('.show').innerHTML = `
<img src="${file_info}" style="width: 100%; height: 100%" alt="要展示的图片"/>
`
}
reader.readAsDataURL(file)
/*
readAsArrayBuffer() // 读取完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。
readAsBinaryString() // 读取完成，result 属性中将包含所读取文件的原始二进制数据。
readAsDataURL() // 读取完成，result 属性中将包含一个 data: URL 格式的 Base64 字符串以表示所读取文件的内容。
readAsText() // 读取完成，result 属性中将包含一个字符串以表示所读取的文件内容。
*/
}
var __main = function() {
// 识别指定区域的拖动效果
handleInputFileTag()
}
__main()
})()
</script>
</body>
</html>
