zoukankan      html  css  js  c++  java
  • vue的拖拽文件

    <div ref='select_frame'  ondragstart="return false">//防止跳转
    
    </div>
    this.$refs.select_frame.ondragleave = (e) => {
    	e.preventDefault()  // 阻止离开时的浏览器默认行为
    }
    this.$refs.select_frame.ondrop = (e) => {
    	e.preventDefault()    // 阻止拖放后的浏览器默认行为
    	const data = e.dataTransfer.files[0]  // 获取文件对象
    	if (data.length < 1) {
    		return  // 检测是否有文件拖拽到页面
    	}
    	console.log(data)
    	this.upload(data)//上传文件的方法
    }
    this.$refs.select_frame.ondragenter = (e) => {
    	e.preventDefault()  // 阻止拖入时的浏览器默认行为
    	this.$refs.select_frame.border = '2px dashed red'
    }
    this.$refs.select_frame.ondragover = (e) => {
    	e.preventDefault()    // 阻止拖来拖去的浏览器默认行为
    }
    

      上面的代码就可以实现vue中拖拽文件上传啦~

  • 相关阅读:
    Java实现线程的三种方法
    java 包和访问权限小结
    Java从外部调用类的私有方法
    find
    sigprocmask
    alerm和pause
    kill和raise
    信号处理中可重入函数调用
    低速系统调用的信号中断
    signal函数
  • 原文地址:https://www.cnblogs.com/yiyi17/p/9208376.html
Copyright © 2011-2022 走看看