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

最新推荐文章于 2022-07-27 15:23:26 发布
最新推荐文章于 2022-07-27 15:23:26 发布
阅读量3.4k 收藏
点赞数
分类专栏： Web开发 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abc45628/article/details/49779591
版权

参考：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" οnchange="getFiles();" /></label>

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


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

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


                

        

        

    




    

      

        

            

              
                
                  abc45628
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
JS获取input file绝对路径的方法(推荐)

				
			

			

				

					10-21
				

			

		

		

			
				
传统的HTML中，`<input type="file">` 元素可以用来让用户选择文件，但是出于安全考虑，浏览器出于安全考虑，不允许网页通过JavaScript直接获取用户本地文件系统的绝对路径。这是因为直接访问本地文件系统可能会引发...

			
		

	



                

              
                



	

		

			

				
					
如何使用JS获取IE上传文件路径(IE7,8)

				
			

			

				

					10-27
				

			

		

		

			
				
 fileupload.parentNode.innerHTML = '<input type="file" name="' + fileupload.name + '" id="' + fileupload.id + '"onchange="disableSave(this);"/> ';  alert("文件超过大小！");  } else {  alert("文件上传...

			
		

	



                


  
              

                


	

		

			

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

				
			

			

				

					pingya126的博客
				

				

					10-18
					
					764
					
				

			

		

		

			
				
火狐开发者网络
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
					
					5639
					
				

			

		

		

			
				
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
					
					213
					
				

			

		

		

			
				
//在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

			
		

	





	

		

			

				
					
读取input:file的路径并显示本地图片的方法

				
			

			

				

					09-05
				

			

		

		

			
				
1. **获取文件**：当用户通过`<input type="file">`选择文件后，可以通过JavaScript的`HTMLInputElement.files`属性访问到这个文件对象。  2. **验证文件类型**：在读取文件之前，通常需要验证文件是否是有效的图片...

			
		

	





	

		

			

				
					
将input file的选择的文件清空的两种解决方案

				
			

			

				

					09-04
				

			

		

		

			
				
首先，通过`getElementById`获取到`<input type="file">`元素的引用，然后调用`select()`方法选中该输入框，接着使用`document.selection.clear()`清除当前的选择。这种方法基于浏览器的旧版选择和清除机制，其工作...

			
		

	





	

		

			

				
					
javascript 获取表单file全路径

				
			

			

				

					10-29
				

			

		

		

			
				
在早期的Internet Explorer（如IE6）中，用户可以通过`<input type="file">`选择文件后，直接通过该元素的`value`属性来获取所选文件的完整路径。例如，当用户选择了一个文件后，`document.getElementById('...

			
		

	





	

		

			

				
					
IE浏览器下的Input File详解

				
			

			

				

					binggoogle的专栏
				

				

					08-07
					
					4476
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					yunduanaoligei的博客
				

				

					12-16
					
					1747
					
				

			

		

		

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

IE下：

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

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

			
		

	





	

		

			

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

				
			

			

				

					PrimaryColor
				

				

					01-14
					
					1万+
					
				

			

		

		

			
				
一、示例标签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
					
					8841
					
				

			

		

		

			
				
实现上传文件

			
		

	





	

		

			

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

				
			

			

				

					cc的博客
				

				

					12-14
					
					6949
					
				

			

		

		

			
				
一、- 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
					
					9556
					
				

			

		

		

			
				
<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
					
					8837
					
				

			

		

		

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

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

			
		

	





	

		

			

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

				
			

			

				

					鹏飞的专栏
				

				

					01-09
					
					2888
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_45465901的博客
				

				

					10-12
					
					4904
					
				

			

		

		

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

			
		

	





	

		

			

				
					
<div  class="table-container">
    <table id="myTable">
	<thead>
        <tr>
          <th contenteditable="true" ><input type="text" oninput="filterTable(1)" placeholder="aoiStep" ></th>
  <th contenteditable="true" ><input type="text" oninput="filterTable(2)" placeholder="defectType" ></th>
  <th contenteditable="true" ><input type="text" oninput="filterTable(3)" placeholder="layerCode" ></th>
           <th contenteditable="true" ><input type="text" oninput="filterTable(4)" placeholder="type"></th>
          <th contenteditable="true" ><input type="text" oninput="filterTable(5)" placeholder="dpet" ></th>
          <th contenteditable="true"><input type="text" oninput="filterTable(6)" placeholder="subcode" ></th>
          <th contenteditable="true" ><input type="text" placeholder="codeDescription" ></th>
          <th contenteditable="true" >image1</th>
           <th contenteditable="true" >image2</th>
          <th contenteditable="true">image3</th>
          <th contenteditable="true" >image4</th>
          <th contenteditable="true" >image5</th>
<th contenteditable="true" ><input type="text" placeholder="determination_rule"></th>
        </tr>
      </thead>
      <tbody>
		  <form action="unload.php" method="POST" enctype="multipart/form-data">
        <tr>
          <td input type="text" name="aoi_step">3</td>
          <td input type="text" name="defect_type">Particle</td>
          <td input type="text" name="layer_code">ACT</td>
          <td input type="text" name="type">Particle</td>
          <td input type="text" name="dpet">ACT</td>
          <td input type="text" name="subcode">Particle</td>
          <td input type="text" name="code_description">ACT</td>
          <td>
  <input type="file" name="image1_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
           <td>
  <input type="file" name="image2_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
</td>
           <td>
  <input type="file" name="image3_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
</td>
          <td>
  <input type="file" name="image4_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
</td>
          <td>
  <input type="file" name="image5_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
 
</td>
		 <td input type="text" name="determination_rule">Particle</td>
		<tr>
      <button type="submit">提交</button>
			</tr>
	  </form>
</tbody>	
	</div>
    <script>修改后在我提娜佳图片是报错

					
最新发布

				
			

			

				

					07-23
				

			

		

		

			
				
 <td><input type="file" name="image1_path" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;"></td>  <td><input type="file" name="image2_...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值