开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js获取拖拽文件路径

在JavaScript中，获取拖拽文件的路径通常涉及到HTML5的拖放API（Drag and Drop API）。以下是一些基础概念和相关信息：

基础概念

拖放API：允许用户通过拖动和放置来与网页元素进行交互。
DataTransfer对象：在拖放操作期间，浏览器会创建一个DataTransfer对象，该对象包含了拖动数据的信息。

应用场景

文件上传：用户可以通过拖拽文件到指定区域来上传文件。
内容排序：在列表或网格中拖拽项目以重新排序。

示例代码

以下是一个简单的示例，展示了如何使用JavaScript获取拖拽文件的路径：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop File Path</title>
    <style>
        #dropArea {
            width: 300px;
            height: 200px;
            border: 2px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="dropArea">
        Drag & Drop files here
    </div>
    <script>
        const dropArea = document.getElementById('dropArea');

        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });

        function highlight(e) {
            dropArea.style.borderColor = 'blue';
        }

        function unhighlight(e) {
            dropArea.style.borderColor = '#ccc';
        }

        dropArea.addEventListener('drop', handleDrop, false);

        function handleDrop(e) {
            let dt = e.dataTransfer;
            let files = dt.files;

            handleFiles(files);
        }

        function handleFiles(files) {
            ([...files]).forEach(uploadFile);
        }

        function uploadFile(file) {
            console.log('File Path:', file.path); // 注意：现代浏览器通常不提供文件的本地路径
            console.log('File Name:', file.name);
            console.log('File Type:', file.type);
            console.log('File Size:', file.size);
        }
    </script>
</body>
</html>

注意事项

安全性：出于安全考虑，现代浏览器通常不会提供文件的本地路径（file.path），而是只提供文件名（file.name）和其他元数据。
兼容性：不同浏览器对拖放API的支持程度可能有所不同，需要进行兼容性测试。

常见问题及解决方法

无法获取文件路径：
- 原因：现代浏览器出于安全考虑，通常不提供文件的本地路径。
- 解决方法：使用文件名和其他元数据进行处理，或者考虑使用服务器端解决方案来获取文件路径。

拖放事件未触发：
- 原因：可能是因为没有正确阻止默认行为或停止事件冒泡。
- 解决方法：确保在相关事件处理函数中调用e.preventDefault()和e.stopPropagation()。

通过以上信息，你应该能够理解如何在JavaScript中获取拖拽文件的路径，并解决相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js获取所选文件路径

前言本来今天想用vue做一个button，点击后选择本地文件，并获取文件路径，但只在html下实现了，vue下还要研究下。...实现这个小工具的大概的思路就是，获取了文件的路径后，将所选的文件按照顺序存放到一个文本文件中，然后点击另一个按钮之后，调用现有的python程序，这个python程序去读取文件路径文本中的内容，依次合并

14.5K2 0

js 获取多级路径

数据结构 let treeData = [{ id: 1, label: '一级 1', children: [{ ...

33.5K2 1

js拖拽

开发了那么久，对于js实现拖拽多少都写过，用于实际项目却没有。先看一下之前写的：如果鼠标慢慢移动，拖拽是没有任何问题的，如果速度快了，那么鼠标和元素就会分离。

5.4K3 0

input file获取文件路径

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/160948.html原文链接：https://javaforall.cn ...

6.8K1 0

js获取上下文路径

function () { alert("执行失败"); } }) } //获取上下文路径

10.7K1 0

js拖拽

/*js拖拽逻辑: 第一：为什么要定位? 因为 ? 往左往上left top要定位的哈第二：为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的....鼠标是400.那样的话,400-(150-100)=350.就是div所在的位置.也就是move后的位置. js拖拽: <!

4.6K4 1

js拖拽

javascript"> div.onmousedown = function(e){ var ev = e || event; var l = ev.clientX - div.offsetLeft;//获取到

5.2K1 0

Android通过URI获取文件路径

之前在工作的过程中，遇到不同 Android 版本下 URI 采用不同方式来获取文件路径的问题。因为需求的原因，要求拍照上传或者从相册中选择图片上传，而且图片是需要经过压缩的，大小不能超过2M。...intent, FILE_CHOOSER_RESULT_CODE); 之后就是在 onActivityResult(int requestCode, int resultCode, Intent data) 中获取到...最关键的来了，如果通过 URI 来获取文件呢？...比如，现在 URI 为 content://media/extenral/images/media/17766 ，而我们需要得到对应的文件路径。...这是因为在 Android 4.4 及以上的机型，使用了 DocumentUri 来代表获取到文件的 URI 。所以我们又要对于 DocumentUri 进行适配。

3K6 0

Java文件路径服务器路径的获取

Java文件路径获取几种获取方式 getResourceAsStream ()返回的是inputstream getResource()返回:URL Class.getResource(“”)...=System.getProperty(“user.dir”); 上述相对路径中，java项目中的文件是相对于项目的根目录 web项目中的文件路径视不同的web服务器不同而不同（tomcat是相对于...bin/ E:\ E:\workspace\JavaStudy 参考地址：http://blog.csdn.net/ak913/article/details/7399056 Java获取服务器路径...+“:”+ request.getServerPort()+contextPath+“/”; 说明 contextPath =”/项目名称”; //获取的是项目的相对路径...realPath = F:\tomcat_home\webapps\项目名称\ //获取的是项目的绝对路径（Tomcat服务器中项目所在目录） basePath = http://localhost

4.3K2 0

获取MySQL配置文件路径

在实际工作中，MySQL可能会涉及多个配置文件，但是因为各种原因我们无法找到它们的路径，那么我们可以通过以下命令找到：首先找到mysqld的路径： $ which mysqld /usr/sbin/mysqld...通过mysqld找到所有配置文件的路径： $/usr/sbin/mysqld --verbose --help | grep -A 1 'Default options' Default options...read from the following files in the given order: /etc/my.cnf /etc/mysql/my.cnf ~/.my.cnf 于是就得到了所有配置文件可能的路径

3.7K2 0

原生JS拖拽

="IE=edge"> 原生JS...拖拽 * { margin: 0; padding: 0; }...class="box" id="drag"> window.onload = function () { // 获取拖拽的节点...let drag = document.getElementById('drag') // console.log(drag); // 按下别拖拽对象的时候...// console.log(event); // 获取window对象 var event = event || window.event;

13.1K4 0

Js拖拽事件

t=maxH; } oDrag.style.left=l+'px'; oDrag.style.top =t+'px'; } 知识点：用class获取元素封装...; 学习mouseover事件; 常见拖拽bug造成原因,鼠标当前位置-元素距离浏览器的位置；超过容器大小判断；

14.1K2 0

获取当前jar包路径_java获取jar文件

一、获取可执行jar包所在目录（1）方法一：使用 System.getProperty("java.class.path") 获取classpath的路径，若没有其他依赖，在cmd下运行该可执行jar...包，则该值即为该jar包的绝对路径。...filePath.substring(0,filePath.indexOf(pathSplit)); }else if (filePath.endsWith(".jar")) { //截取路径中的...System.out.println("jar包所在目录："+filePath); 二、获取当前JVM运行目录使用： System.getProperty("user.dir") 三、获取jar包内的资源文件...文件与classes在同一目录下，或者使用maven构建时，文件存在于resources文件夹下，可以使用： getResourceAsStream 代码如下： /** * 读取jar包中的资源文件

7.5K2 0

类加载器获取文件路径相关

类加载器获取配置文件路径的小细节!...前言简单的记录一下我对类加载器使用过程中遇到的问题,以及解决方法我们利用类加载器获取配置文件路径是这样的 //获取src路径下的文件方式-->ClassLoader 类加载器 ClassLoader..."jdbc.properties"); String path = resource.getPath(); System.out.println(path); ---- 需要注意的是，这段代码对应的文件路径如下... 这个时候的配置文件是在src下的这里我们把它移动一下位置，代码不变配置文件被我们移动到com.hcg.jdbc包下后，代码不变，再运行会报错 Could not initialize class...xxx 接着我们稍微加点东西可以看到，又正常了，不会报错了总结以上试验说明了类加载器的getResource()方法是从src目录下查找的，如果你要找的文件在其它的二级目录，需要带上相应的路径才能查找成功

1.7K2 0

js拖拽上传图片

有时候，在开发中，需要遇到拖拽上传图片的需求，即从磁盘选中一张或多张图片，然后按着鼠标把图片拖动到页面上指定的区域，实现图片的上传。...relaPathList.add(infoList[1]); //相对路径 realPathList.add(infoList...[2]); //真实路径 }else{ //如果上传失败 fileNameList.add("");...ie=edge"> Document js...这里我们就要先说说在 http 中传输文件的问题。起初http协议中没有上传文件方面的功能，直到rfc1867为http协议添加了这个功能。

18.2K3 0

JS魔法堂：获取当前脚本文件的绝对路径

一、前言　　　　　　　　　　　　　　　　　　　　　　　　当写模块加载器时，获取当前脚本文件的绝对路径作为基础路径是必不可少的一步，下面我们一起来探讨一下这个问题吧！...document.currentScript.src; }; 这里利用了对象 document.currentScript ，它返回的是当前执行的script元素；然后调用script元素的src属性即可获取脚本文件的绝对路径...js/, absPath = rExtractUri.exec(stack); return absPath[0] || ''; }; [C]....这里url就是当前脚本的绝对路径了。...　　　　　　　　　　　　　　　　　　　　　　　　完整的getCurrAbsPath请浏览https://github.com/fsjohnhuang/getCurrAbsPath/blob/master/lib/getCurrAbsPath.js

3.8K6 0

SAS Macro小技巧—获取文件路径

今天给大家Share一下SAS Macro获取文件路径的技巧！获取路径有哪些用途呢：如果路径都用宏变量表示，当文件夹的物理路径发生变化时，都还是可以直接运行程序！不需要修改成程序~ 上代码！...为SAS程序所在路径。...（如上代码可以直接复用） SAS 创建文件夹：文件名，后面是路径>如下代码：这样做的的好处是啥呢，每次运行数据或者数据集想实现自动存下来，这个时候就可以用SAS自动创建文件夹的方式来存储。...; /*以时间命名的新建文件夹*/ data _null_; NewDir=dcreate("&date."... first: proc contnets 获取变量列表并筛选出你需要变量。

4.6K3 1

获取路径文件的后缀名字

使用QFileInfo获取路径文件的名字与后缀测试文件 "/tmp/file.tar.gz" 1 获取文件名返回不带名字的 file QString QFileInfo::baseName() const...返回名字和后缀 file.tar.gz QString QFileInfo::fileName() const 2 获取文件后缀返回 "gz" QString QFileInfo::suffix()

3.6K2 0

OC中根据文件路径获取文件大小

, NSUserDomainMask, YES) firstObject]; NSInteger size = [self getSizeOfFilePath:cachePath]; // 文件大小...*/ NSFileManager * manager = [NSFileManager defaultManager]; /**获取文件下的所有路径包括子路径 */ NSArray * subPaths...= [manager subpathsAtPath:filePath]; /** 遍历获取文件名称 */ for (NSString * fileName in subPaths) { /...** 拼接获取完整路径 */ NSString * subPath = [filePath stringByAppendingPathComponent:fileName]; /** 判断是否是隐藏文件...fileExistsAtPath:subPath isDirectory:&isDirectory]; if (isDirectory) { continue; } /** 获取文件属性

2.7K2 0

JS实现拖拽代码

////html的代码说明： ////定义了一个table，用于测试js拖拽功能 2 3 ////js...，始终更新当前拖拽对象的坐标即可 function mouseMove() { if(null !...function(){ mouseDown(obj)}; obj.onmousemove= function(){ mouseMove()}; } JS...拖拽

8.1K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭