<style>
#div { width: 400px; height: 200px;
border: 1px solid black;
background: burlywood;
}
</style>
<body>
<p id="p" draggable="true">中国冬奥会已经入账7枚金牌</p>
<span id="span" draggable="true">这是一个span</span>
<div id="div"></div>
<script>
// 绑定目标对象事件
div.ondragenter = ()=>{
console.log('drag enter ...')
}
div.ondragover = (event)=>{
event.preventDefault() // 阻止浏览器默认行为
console.log('drag over ...')
}
div.ondragleave = ()=>{
console.log('drag leave ...')
}
div.ondrop = (event)=>{
let dt = event.dataTransfer
let tag = dt.getData('tag')
let html = dt.getData('html')
// 创建这个标签,设置innerHTML,追加到div
let e = document.createElement(tag)
e.innerHTML = html
div.appendChild(e)
// 当拖拽文件进入div然后释放,浏览器将会自动打开文件
event.preventDefault() // 阻止浏览器默认行为
event.stopPropagation() // 阻止事件冒泡
console.log('drop ...')
}
span.addEventListener('dragstart', (event)=>{
let dt = event.dataTransfer
dt.setData('tag', 'span')
dt.setData('html', span.innerHTML)
})
// 绑定源对象事件
p.addEventListener('dragstart', function(event){
console.log('开始拖拽...')
// 将当前元素的信息,存入DataTransfer,等会追加
let dt = event.dataTransfer
dt.setData('tag', 'p')
dt.setData('html', p.innerHTML)
})
p.addEventListener('drag', function(){
// console.log('拖拽中...')
})
p.addEventListener('dragend', function(){
console.log('拖拽结束...')
})
</script>
</body>
---------------------------------------------------------------------------------------------------------------------------------
elementUI 实现
HTML实现
<style>
#div { width: 500px; height: 300px;
border: 3px solid black; background: beige;
text-align: center; line-height: 300px;
font-size: 40px; font-weight: bold;
}
</style>
</head>
<body>
<div id="div">
将文件拖入此处上传
</div>
<script src="./axios.min.js"></script>
<script>
div.addEventListener('drop', function(e){
e.preventDefault() // 浏览器兼容
e.stopPropagation() // 浏览器兼容
let files = e.dataTransfer.files
console.log(files)
// 上传多个文件
let fd = new FormData()
for(let i=0; i<files.length; i++){
fd.append('uploadFile', files[i])
}
axios.post("http://localhost:3000/upload", fd)
})
div.addEventListener('dragover', function(e){
// 加上这一行,才可以触发drop事件
e.preventDefault()
})
</script>
</body>
node.js代码 如下
// 加载express模块
const express = require('express')
// 创建web服务实例
const server = express()
//配置CORS,指定放行的域名,防止出现跨域问题
const cors = require('cors')
server.use(cors({
origin: "*"
}))
//配置multer中间件
const multer = require('multer')
// 创建一种存储方案:diskStorage(磁盘存储)
obj = multer.diskStorage({
destination : function(req, file, cb){ //指定目录
cb(null, 'upload')
},
filename : function (req, file, cb){ // 指定文件名
// console.log(uuid.v1())
// console.log(uuid.v4())
let name = file.originalname
// name: abcd.jpg xxxdfdd.zip
let ext = name.substr(name.lastIndexOf('.'))
cb(null, uuid.v4() + ext)
}
})
const uploadTools = multer({
storage : obj // 设置上传文件的存储方案
})
const uuid = require('uuid')
// 静态资源托管upload目录
server.use(express.static('upload'))
// 指定web服务器的监听端口
server.listen(3000, function(){
console.log('上传服务已经启动..')
})
//接收请求
server.post('/upload',
uploadTools.array('uploadFile'), (req, res)=>{
// console.log(req.files)
// req.files 保存了已经上传成功的图片信息
// 输出所有已经上传了的文件名:
let urls = []
req.files.forEach(item=>{
console.log(item.filename)
urls.push('http://localhost:3000/'+item.filename)
})
res.send(urls)
})