js获取被选择文件的路径方法汇总

最新推荐文章于 2024-05-31 16:16:35 发布
最新推荐文章于 2024-05-31 16:16:35 发布
阅读量3.1w 收藏 15
点赞数 2
文章标签： html javaScript file
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiayujj123/article/details/51577262
版权


html代码如下：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file demo</title>
    <script src="jquery.js"></script>
</head>
<body>   
    <input type="file" name="fileString" multiple class="file">    
</body>
</html>


获取文件路径方法如下：


    <script>
         $("input[name=fileString]").change(function() {
            //var names = [];
			
            for (var i = 0; i < $(this).get(0).files.length; ++i) {
               // names.push($(this).get(0).files[i].name);
				//console.log($(this).get(0).files[i].mozFullPath);
				//方式一：
				var filePath = $(this).val();
				console.log(filePath);
				//方式二：
				alert($('input[type=file]').val());
            }
            //console.log(names);
			//方式三：
			alert($("input[name=fileString]").val());

        })
        
    </script>


 

 

 

 

注意：以上方式取到的都是文件的伪路径，由于浏览器的安全策略，Chrome浏览器及Chrome内核的浏览器是不可能获取文件在本地的真实路径的。IE浏览器可以通过设置安全级别，能获取到真实路径。
 


 
 


 

                

        

        

    




    

      

        

            

              
                
                  冷月无声_x
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    15
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Node.js文件操作方法汇总

				
			

			

				

					10-22
				

			

		

		

			
				
 使用`fs.openSync()`方法打开文件，并提供文件路径（path）、打开模式（flags）和访问模式（mode）作为参数。例如：  ```javascript  var fs = require("fs");  var fd = fs.openSync("data/openClose.txt", 'w'); ...

			
		

	



                

              
                



	

		

			

				
					
JS正确读取文件路径

				
			

			

				

					11-20
				

			

		

		

			
				
解决由于IE安全性设置造成的不能正确读取文件路径的问题

			
		

	



                


  
              

                


	

		

			

				
					
JS获取当前文件所在的文件夹全路径

				
			

			

				

					weixin_34392843的博客
				

				

					03-18
					
					1566
					
				

			

		

		

			
				
一、Google，FF浏览器获取当前js文件的路径
document.currentScript.src

//Google,FF 下获取当前js文件的路径
// IE10+、Safari和Opera9不支持
console.info(document.currentScript.src);

 
二、比较兼容的获取方式（推荐）

//页面解析到当前为止所有的script标签
var js = d...

			
		

	





	

		

			

				
					
js获取file文件选择路径

				
			

			

				

					m0_74860299的博客
				

				

					11-21
					
					260
					
				

			

		

		

			
				
var fileObj = document.querySelector(".file")    fileObj.addEventListener('mouseleave',function()    {    var url = null;      fileObj = document.querySelector(".file").files[0];if (window.createObjcectURL != undefined) {      url = window.createOjcectURL(

			
		

	



		

			
		



	

		

			

				
					
javascript读取本地目录

					
最新发布

				
			

			

				

					知码客
				

				

					05-31
					
					711
					
				

			

		

		

			
				
在JavaScript中，直接读取本地目录的能力受到浏览器安全限制，因为出于隐私和安全考虑，浏览器的JavaScript环境通常不允许直接访问用户的文件系统。然而，随着Web技术的发展，一些现代浏览器引入了File System API或Web FileSystem API，允许在用户许可的情况下进行有限的文件系统操作。总之，如果你需要在浏览器环境中读取本地目录，目前最可行的方法是使用File System Access API，但请注意这需要用户交互并且不适用于所有浏览器。但这不适用于其他浏览器。

			
		

	





	

		

			

				
					
js获取用户选择的文件路径[曲线救国]

				
			

			

				

					@不喝海之言@
				

				

					11-22
					
					1万+
					
				

			

		

		

			
				
JavaScript如何获取用户input[type=file]选择的文件路径呢？
首先，JavaScript本身是无法通过input[type=file]获取用户选择的文件路径的，这条路是行不通的。

有经验的都知道，这样获取到的路径是 C:/fakepath/...一类的路径。

所以，那我们还有办法通过input[type=file]获取文件的路径吗？
答案：有

写一个C++去调用系统底层的一些东西，然后交给JavaScript调用这个C++文件
曲线救国

C++，我…不会写，所以还是看一下曲线救

			
		

	





	

		

			

				
					
JS获取自身所在文件的目录路径

				
			

			

				

					LJQDMY的博客
				

				

					11-10
					
					1776
					
				

			

		

		

			
				
其实仔细想想，由于判断路径的js代码一般都直接放在js文件中而不是函数中，所以当加载该js文件时会立即执行其中的语句，而执行此语句时所获取到的js文件数目正好是js.length-1，因为页面后面的js文件还没有加载，所以该处的js文件获取的数目并不是页面所有的js文件的数目。这样一来，获取路径就无需再遍历了，而且文件判断也无需文件名，判断更加准确(js.length-1永远都是其文件本身)。其实我们可以有更简单的办法来准确获取路径，这是在一次js测试突然发现并幡然醒悟的。直接使用js.length？

			
		

	





	

		

			

				
					
原生js实现文件下载

				
			

			

				

					似水流年QC的博客
				

				

					05-22
					
					4415
					
				

			

		

		

			
				
文件下载是前端开发常见的开发需求，本文以vue框架为例介绍两种下载方式，一个是网络文件下载，一个是本地文件下载，具体实现如下，如需体验，可点击底部demo链接。

			
		

	





	

		

			

				
					
js根据接口获取的文件路径下载文件

				
			

			

				

					竹亦叶同的博客
				

				

					03-31
					
					1069
					
				

			

		

		

			
				
dowloadFile (content, filename) {
      var eleLink = document.createElement('a');
      eleLink.download = filename;
      eleLink.style.display = 'none';
      // 字符内容转变成blob地址
      var blob = new Blob([content]);
      eleLink.href = URL.createObjectUR

			
		

	





	

		

			

				
					
javascript文件夹选择框的两种解决方案（主要是获取用户选择的文件夹的路径）

				
			

			

				

					勿忘初心,安得始终
				

				

					10-24
					
					2232
					
				

			

		

		

			
				
转自http://www.blogjava.net/supercrsky/archive/2008/06/17/208641.html
解决方案1:
调用windows 的shell,但会有安全问题.

 * browseFolder.js
 * 该文件定义了BrowseFolder()函数，它将提供一个文件夹选择对话框
 * 以供用户实现对系统文件夹选择的功能
 * 文件夹选择对话

			
		

	





	

		

			

				
					
使用JavaScript实现保存文件，用户可以自己选择本地路径

				
			

			

				

					m0_53063391的博客
				

				

					09-28
					
					5937
					
				

			

		

		

			
				
浏览器的权限是很低的，是不能与操作系统实现交互，只有少量的api可以与操作系统交互，例如文件上传。但是，软件是有很高的权限的，例如，迅雷下载就可以轻松实现，下载到指定目录。// 创建可写入的文件对象。// 打开保存文件对话框。// 在这里写入文件内容。

			
		

	





	

		

			

				
					
js 实现选择文件存放路径

					
热门推荐

				
			

			

				

					那个小学生的博客
				

				

					12-25
					
					1万+
					
				

			

		

		

			
				
最近遇到js 实现选择文件存放路径问题，百度了一下找到一个方法，使用时碰到的问题分享一下：
以下为代码：
<input id="catchAdress" type="text" /><button onclick="browseFolder()">选择地址</button>

<script>
function browseFolder() {   ...

			
		

	





	

		

			

				
					
web选择文件保存路径

				
			

			

				

					04-22
				

			

		

		

			
				
web选择文件保存路径的方式，大致分为两种，大家可以下来了了解一下，个人表示第一种比较好用

			
		

	





	

		

			

				
					
js 获取本地文件及目录的方法(推荐)

				
			

			

				

					01-21
				

			

		

		

			
				
Javascript是网页制作中离不开的脚本语言，依靠它，一个网页的内容才生动活泼、富有朝气。但也许你还没有发现并应用它的一些更高级的功能吧？比如，对文件和文件夹进行读、写和删除，就象在VB、VC等高级语言中经常做的工作一样。怎么样，你是否需要了解这方面的知识？那就请跟我来，本文将详细描述如何使用Javascript语言进行文件操作。
一、功能实现核心：FileSystemObject 对象 
其实，要在Javascript中实现文件操作功能，主要就是依靠FileSystemobject对象。在详细介绍FileSystemobject对象的各个属性和方法的使用细节前，先来看看这个对象包括哪些相

			
		

	





	

		

			

				
					
JavaScript获取URL汇总

				
			

			

				

					12-03
				

			

		

		

			
				
URL即统一资源定位符 (Uniform Resource Locator, URL)，...path:路径，由零或多个”/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。 query:查询，可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP

			
		

	





	

		

			

				
					
node.js基础知识汇总

				
			

			

				

					10-14
				

			

		

		

			
				
Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行环境，它允许开发者使用 JavaScript 语言编写服务器端应用。Node.js 的核心特点在于其非阻塞I/O 和事件驱动模型，这使得它在处理高并发请求时表现出色。下面...

			
		

	





	

		

			

				
					
日常工作搜索整理蓝凌低代码汇总

				
			

			

				

					10-23
				

			

		

		

			
				
11:判断角色线解析结果是否为空12:流程采用表单，表单中要求提交人选择部门信息(多值)，在流程的某个节点需要按照表单所选择的部获取部门领导 13:同一节点的人需要会审或者需要同时抄送多人 14:根据自定义表单的多选...

			
		

	





	

		

			

				
					
Node.js 资源汇总

				
			

			

				

					08-07
				

			

		

		

			
				
- **path**：处理文件路径。 - **child_process**：子进程管理，可以运行其他命令行程序。 - **cluster**：用于创建多进程，利用多核 CPU 提升性能。  ### 4. Node.js 框架与库  - **Express**：快速、开放、极简的 ...

			
		

	





	

		

			

				
					
在html页面上实现弹出对话框,选择文件保存路径,js获取a标签download弹出另存为对话框的路径。...

				
			

			

				

					weixin_39622710的博客
				

				

					06-07
					
					3018
					
				

			

		

		

			
				
在html或者jsp中弹出文件另存为的对话框，可以调用document.execCommand方法调用JS方法document.execCommand即可在前台页面调出另存为对话框，并将将服务器上存放的文件保存到本地。HTML页面另存为对话框DEMO.rar代码：functiongetimg()//另存为存放在服务器上图片到本地的方法{event.returnValue=false;show....

			
		

	





	

		

			

				
					
js获取input file文件路径

				
			

			

				

					06-28
				

			

		

		

			
				
### 回答1：
JavaScript无法直接获取input file的文件路径，因为出于安全考虑，浏览器不允许JavaScript访问本地文件系统。但是可以通过以下方式获取文件名：

1. 使用input元素的value属性获取文件名，例如：

```
var fileName = document.getElementById("fileInput").value;
```

2. 使用File API获取文件名，例如：

```
var file = document.getElementById("fileInput").files[0];
var fileName = file.name;
```

注意：以上方法只能获取文件名，无法获取文件路径。   

### 回答2：
在JavaScript中获取input file文件路径需要使用File API，具体步骤如下：

1. 获取input元素

首先需要获取用于选择文件的input元素，可以使用document.getElementById()或jQuery等方法获取。例如：

HTML代码：

```
<input type="file" id="file">
```

JavaScript代码：

```
var input = document.getElementById('file');
```

2. 监听change事件

在input元素选择文件后，将触发change事件。需要通过监听此事件来获取文件对象并读取文件内容。例如：

JavaScript代码：

```
input.addEventListener('change', function() {
  var file = input.files[0];
  if (file) {
    // 执行文件处理操作
  }
});
```

在上述代码中，input.files[0]代表选择的文件对象，可以获取文件名、大小等信息。

3. 读取文件内容

如果需要读取选择的文件内容，可以使用FileReader对象。例如：

JavaScript代码：

```
var fileReader = new FileReader();
fileReader.readAsText(file); // 以文本形式读取文件内容
fileReader.onload = function() {
  var content = fileReader.result; // 文件内容
};
```

在上述代码中，fileReader.readAsText(file)表示以文本形式读取文件内容。可以使用fileReader.readAsDataURL(file)以base64编码形式读取文件内容。在读取成功后，fileReader.result属性包含文件内容。

4. 获取文件路径

由于出于安全原因，浏览器不允许JavaScript访问文件路径。但是可以通过File API提供的URL.createObjectURL()方法生成blob URL来获取文件路径。例如：

JavaScript代码：

```
var fileURL = URL.createObjectURL(file);
```

在上述代码中，fileURL即为生成的文件blob URL，可以用于预览或下载文件。

总结：

通过以上步骤，即可在JavaScript中获取input file文件路径和内容。需要注意的是，在使用完文件后，需要及时调用URL.revokeObjectURL()方法释放blob URL。   

### 回答3：
JavaScript 获取 input file 文件路径需要通过 File API 实现，具体步骤如下：

1. 获取 input[file] 元素

通过 `document.querySelector` 或 `document.getElementById` 方法获取包含文件选择框的 input 元素。

```
let fileInput = document.querySelector('input[type=file]');
```

2. 监听文件选择事件

通过 `addEventListener` 方法为该 input 元素注册 change 事件监听器。在该事件的回调函数中，获取选中的文件对象。

```
fileInput.addEventListener('change', function() {
  let file = fileInput.files[0];
  console.log(file.name);
});
```

3. 获取文件路径

获取文件路径也需要使用 File API 中的 `FileReader` 对象。通过 `FileReader.readAsDataURL()` 方法读取文件数据并返回 data url，其中包含文件路径。读取文件是异步操作，在回调函数中处理获取到的文件路径。

```
fileInput.addEventListener('change', function() {
  let file = fileInput.files[0];
  let reader = new FileReader();
  reader.onload = function() {
    console.log(this.result);
  };
  reader.readAsDataURL(file);
});
```

以上就是通过 JavaScript 获取 input file 文件路径的步骤。需要注意的是，由于浏览器的安全性限制，访问本地文件路径可能存在限制。因此，在实际应用中，还需考虑相关的浏览器兼容性问题。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值