HTML5 文件拖拽 draggabl

MMNHD

已于 2022-02-18 20:41:52 修改

阅读量344

点赞数

分类专栏： html5 文章标签： html5 html 前端

于 2022-02-17 20:49:13 首次发布

本文链接：https://blog.csdn.net/m0_63327154/article/details/122991258

版权

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


<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)
})

MMNHD

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5 文件拖拽 draggabl

<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="t...
复制链接

扫一扫