IE11下获取<input type="file">的文件名

最新推荐文章于 2022-07-27 15:23:26 发布
最新推荐文章于 2022-07-27 15:23:26 发布
阅读量3.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Web开发 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/abc45628/article/details/49779591
本文介绍了一种通过JavaScript获取用户上传文件名称的方法，并提供了一个示例代码。此外还介绍了如何在IE浏览器中通过调整安全设置来获取文件的完整路径。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考：https://msdn.microsoft.com/zh-cn/subscriptions/hh772931(v=vs.85)

<!DOCTYPE html>
<html >
<head>
    <title>Files property test</title> 
    <script type="text/javascript">
        function getFiles() {
            // Get input element
            myFileList = document.getElementById("myfiles");
            // loop through files property, using length to get number of files chosen
            for (var i = 0; i < myFileList.files.length; i++) {
                // display them in the div
                document.getElementById("display").innerHTML += "<br/>" + myFileList.files[i].name ;
            }
        }
</script>
</head>
<body>
<label>Use <strong>shift</strong> or <strong>ctrl</strong> click to pick a few files: 
<input type="file" multiple id="myfiles" onchange="getFiles();" /></label>

<div id="display"></div>
</body>
</html>


可以获取文件名，但是不能获取路径。IE11、FF可用


获取路径需要修改IE安全性设置,步骤是：  工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即可。




                

        

    

    
  



    



                



	

		

			

				
					
要创建一个HTML5的file输入元素并定制其样式，你可以使用`＜input type=“file“＞`标签

				
			

			

				

					BLOG域名:programb.blog.youkuaiyun.com
				

				

					06-26
					
					837
					
				

			

		

		

			
				
选择器在元素获得了焦点并且其任何子元素也获得了焦点时被触发。这意味着它不仅关注当前元素是否处于焦点状态，还检查其内部是否有其他部分也获得焦点，这使得它适用于那些希望在内容区域任何地方被聚焦时呈现特定样式的元素，如可折叠菜单或滚动区域内的某个部分。这段代码设置了file输入框的基本外观，当用户选择文件时，背景色会变为灰色，并在鼠标悬停时改变为红色。选择器应用于元素在其生命周期内被激活（通常通过用户的点击或按下）的那一刻，但并不总是保持该状态，例如按钮在被按下并释放时会失去这个状态。标签，配合CSS来实现。

			
		

	



                

            
              



	

		

			

				
					
input type=file 服务器端上传文件

				
			

			

				

					Trimen123的专栏
				

				

					05-31
					
					4490
					
				

			

		

		

			
				
最近遇到个问题，用input type=file 上传文件的时候遇到谷歌只能取到文件名而无法取到全路径的问题，这个是由于浏览器为了安全考虑而屏蔽了，我所知不设置浏览器外可以以下有2种方式，

第一、 给input type=file 设置 runat=server 节点，另外设置id值。后端就可以取到啦~

第二、为form设置enctype="multipart/form-data" 节

			
		

	



              


  
              

                


	

		

			

				
					
<input type="file">系列文章一（上）

				
			

			

				

					pingya126的博客
				

				

					10-18
					
					878
					
				

			

		

		

			
				
火狐开发者网络
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
可以让用户选择一个或多个file,通过表单提交上传给一个服务器，或者使用javascript的File API进行操作。
例：


value ：代表被选择文件路径的dom字符串。
事件（events）：change和input

			
		

	





	

		

			

				
					
JS获取IE上传文件路径、后缀、大小、文件名代码

				
			

			

				

					笑看人生的专栏
				

				

					07-23
					
					5756
					
				

			

		

		

			
				
JS获取IE上传文件路径、后缀、大小、文件名代码

www.111cn.net 编辑:Space 来源:转载


本文章先给大家介绍一个很不错的在ie7,ie8中可获取上传文件路径的函数，后来再详细的补充了一些在ff下获取后缀、大小、文件名代码，各位朋友可参考。
兼容ie7,8获取上传文件路径




 代码如下

复制代码



function validat

			
		

	



		

			
		



	

		

			

				
					
<input>type='file' 标签选取文件/文件夹

					
热门推荐

				
			

			

				

					小博天蝎的博客
				

				

					08-18
					
					4万+
					
				

			

		

		

			
				
一般网页上传文件大家都会用到这个标签<input type='file' id='file_input'/>我们可以通过这个标签选取文件，使用js进行文件上传等操作，同时，该标签同时可以选取多个文件<input type="file" id='file_input' multiple="multiple" />但有些时候，进行其他操作的时候，用户需要获得文件夹路径，那么这种写法可以用该标签选取文件夹

			
		

	





	

		

			

				
					
＜input type=“file“＞  file属性

				
			

			

				

					浅灰色、邂逅的博客
				

				

					07-21
					
					3万+
					
				

			

		

		

			
				
使用type="file"的<input>元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的File API对文件进行操作。



Value
			ADOMString表示已选择文件的路径
		事件
			change和input
		支持的公共属性
			required
		
			附加属性
			
			accept,capture,files,multiple
		IDL 属性
			files和valu...

			
		

	





	

		

			

				
					
获取文件夹中的文件名称，IE浏览器，Js

				
			

			

				

					weixin_42498839的博客
				

				

					10-20
					
					285
					
				

			

		

		

			
				
//在IE浏览器下或者使用ActiveX插件使用此方法，且必须添加信任站点，降低安全级别。
const fn = new ActiveXObject("Scripting.FileSystemObject");
const path = ('C://收藏夹')；
//如果文件中没有包含文件就返回
if(!fn.FolderExiists(path)){
	return;
}
const fPath = fn.GetFolder(path);
const  file=new Enumerator(Fath.f

			
		

	





	

		

			

				
					
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Upload Labs 2</title>
</head>

<body>
    <h2>Upload Labs 2</h2>
    <div>
        <p>假装有一个很酷很酷的前端，有一个很漂亮很漂亮的前端妹子</p> 
        <a href="http://challenge-8755acb685692556.sandbox.ctfhub.com:10800/func.php">去看看你自己到底传了个啥！！！</a>
    </div>

    <div>-------------我是华丽的分割线----------------</div>
    <form action="index.php" method="post" enctype="multipart/form-data">
        <label for="file">文件名：</label>
        <input name="file" id="file" type="file"><br>
        <input name="upload" value="提交" type="submit">
    </form>




</body></html>



				
			

			

				

					07-26
				

			

		

		

			
				
2. **避免直接执行上传的文件**：上传的文件应存储在非 Web 根目录下，避免直接通过 URL 访问。 3. **验证文件内容**：使用图像处理库检查文件内容是否为合法图片。 4. **使用安全的文件名**：上传的文件名应随机...

			
		

	





	

		

			

				
					
若form裡面的<input>的type=file，這種檔案格式的formData要如何取用

				
			

			

				

					07-30
				

			

		

		

			
				
在表单包含 `<input type="file">` 时，**jQuery 的 `serialize()` 和 `serializeArray()` 无法获取文件数据**。需要使用原生 JavaScript 的 `FormData` 对象来处理文件上传。以下是完整解决方案：  ---  ### 解决...

			
		

	





	

		

			

				
					
vue <input type=“file” accept=“.wav” @change=“convertToBase64” />静默上传C盘下的c:/recordfiles/7029188435395251753925604136.wav文件，自动默认上传，无需任何操作

					
最新发布

				
			

			

				

					08-01
				

			

		

		

			
				
<think>根据要求，我们需要在Vue中实现一个自动上传C盘下指定文件的功能。但是，由于浏览器的安全限制，网页不能直接访问用户的文件系统（如C盘路径）。因此，我们无法通过网页直接读取C盘下的文件。   但是，我们...

			
		

	





	

		

			

				
					
IE浏览器下的Input File详解

				
			

			

				

					binggoogle的专栏
				

				

					08-07
					
					4645
					
				

			

		

		

			
				
有点前端经验的同学们肯定知道html 里的 FileUpload 对象，对应的是Input File 元素 ，为什么要说这个呢，因为 IE 浏览器在 FileUpload 对象这个点上一直表现得和其它浏览器“卓”尔不群，我们不是要揭面纱吗，这是个不错的点，可以在这个点上看看IE11跟标准浏览器以及跟IE旧版本有什么异同。安全性考量，Input File 元素的value 值（存放文件路径）是不允许

			
		

	





	

		

			

				
					
HTML中文件上传时使用的＜input type=“file“＞元素的样式自定义

				
			

			

				

					yunduanaoligei的博客
				

				

					12-16
					
					1938
					
				

			

		

		

			
				
今天分享下”“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 Web页面中，在需要上传文件时基本都会用到元素，它的默认样式：
chrome下：

IE下：

论是上边哪一种，样式都比较简单，和许多网页页面的风格也不太融洽。
依据使用者的要求，设计方案风格，更改其表明样式的场所就比较多了。
假如，要像下边一样做一个bootstrap风格的提交按键该如何快速完成。

搭建上传按钮所需的基本元素
复制代码
代码如下:
&l

			
		

	





	

		

			

				
					
html ＜input type=file＞上传文件时，accept属性值汇总，支持文件格式，限制文件格式，限制上传图片的格式

				
			

			

				

					PrimaryColor
				

				

					01-14
					
					2万+
					
				

			

		

		

			
				
一、示例标签1：


<input type="file" accept="image/*" /> 


accept属性说明：

image表示图片，*表示支持所有格式的图片文件。

二、示例标签2：


<inputtype="file"accept="audio/mp4,video/mp4" class="uploadVideo"/>


多种格式，以逗号分隔。

前缀说明：

text：文本文件。如格式：txt、csv、css、html，能直接使用记事本打开的......

			
		

	





	

		

			

				
					
＜input type=“file“＞实现上传文件

				
			

			

				

					weixin_68067009的博客
				

				

					07-27
					
					9678
					
				

			

		

		

			
				
实现上传文件

			
		

	





	

		

			

				
					
HTML input type=file文件 选择表单元素 图片上传等等

				
			

			

				

					cc的博客
				

				

					12-14
					
					7823
					
				

			

		

		

			
				
一、- input type=file与文件上传
本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下：
<input type=file>

但是，为了习惯，我们多写成：
<input type="file">

在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：
<input type="file"...

			
		

	





	

		

			

				
					
input type=“file“属性详解，利用capture调用手机摄像头

				
			

			

				

					极客神殿
				

				

					08-20
					
					1万+
					
				

			

		

		

			
				
<input> type 类型为 file 的标签，可以选择一个或多个文件，通过表单上传到服务器，也可以通过 Javascript 的 File API 对文件进行操作。
实例：
<input name="myFile" type="file">

常用参数：
Value：DOMString 选择文件的路径。DOMString 是UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 String。
事件：change 事件 input

			
		

	





	

		

			

				
					
通过input[type=“file“]上传文件或图片——功能实现

				
			

			

				

					yehaocheng520的博客
				

				

					06-29
					
					9307
					
				

			

		

		

			
				
在后台管理系统中，经常会用到图片或者文件的上传。
如果用到的是VUE框架的话，可以通过对应UI框架中的上传组件：
比如：elementUi中的upload上传

还有一种方式就是直接使用input组件，此组件当type="file"时，就是一个上传文件或者图片的控件了。
具体使用方法如下：
1.触发选择文件的html部分
整个页面都是用的elementUi的框架，因此部分组件是用的elementUI中的组件形式，例如下面的按钮组件
<el-button size="mini" type="succes

			
		

	





	

		

			

				
					
解决firefox3.0，ie8 在上传文件时只能获得文件名，而不能获得文件路径的问题

				
			

			

				

					鹏飞的专栏
				

				

					01-09
					
					2959
					
				

			

		

		

			
				
 解决firefox3.0，ie8 在上传文件时只能获得文件名，而不能获得文件路径的问题：    我们的目的是要获取到文件的全路径，包括文件地址和文件名。下面我们以(struts 1.x)为例讲解------------------------------------------------------------------------------------ 1.jsp页面          

			
		

	





	

		

			

				
					
＜input type=‘file‘ ＞的选中对象信息获取的三种方法！

				
			

			

				

					weixin_45465901的博客
				

				

					10-12
					
					5302
					
				

			

		

		

			
				
浏览器有禁止访问本地资源的限制！造成你想要获取到本地图片或者文件资源获取失败的问题！经过一些列的搜索！发现复制的别人复制的博客，简直千篇一律，有些时候并不是你想要的，例如我就是用的vue就不想引用太多js库，就直接用原生的去获取文件！
获取本地文件资源的有两种方式！另外一种是获取自己公司图片资源服务器的方式！
第一种是使用jquer + new FileReader()；
代码如下：
function toBase64(){
        var file = document.querySelector

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值