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

最新推荐文章于 2024-10-29 20:41:39 发布
最新推荐文章于 2024-10-29 20:41:39 发布
阅读量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选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即可。
 


                

        

    

  


    


                



	

		

			

				
					
自定义input type=”file”元素的样式 (完全隐藏文件框)

				
			

			

				

					weixin_30394251的博客
				

				

					01-23
					
					922
					
				

			

		

		

			
				
为了保证不同浏览器下的UI一致我们有需求要自定义input type=”file”元素的样式

1. 隐藏input type=”file”2. 用CSS将a+span做成按钮样式，对其做事件绑定，点击之后触发input type=”file”的点击事件3. 用input type=”text”显示input type=”file”选中文件的值

HTML

<...

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					Trimen123的专栏
				

				

					05-31
					
					4438
					
				

			

		

		

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

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

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

			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					pingya126的博客
				

				

					10-18
					
					834
					
				

			

		

		

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

			

		

		

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

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


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




 代码如下

复制代码



function validat

			
		

	



		

			
		



	

		

			

				
					
Chromium 中＜input type=“file“＞选择文件实现分析c++

					
最新发布

				
			

			

				

					杰克东的专栏
				

				

					10-29
					
					1494
					
				

			

		

		

			
				
result);与主进程通信类：FileChooser::OpenFileChooser选择文件函数。if (!对应c++代码实现类如下：FileInputType::HandleDOMActivateEvent(Event& event) //鼠标点击事件return;if (!return;

			
		

	





	

		

			

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

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					BLOG域名:programb.blog.csdn.net
				

				

					06-26
					
					768
					
				

			

		

		

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

			
		

	





	

		

			

				
					
mime类型总结 input_type=file限制

				
			

			

				

					陌上花开
				

				

					10-25
					
					2420
					
				

			

		

		

			
				
js 文件类型总结 input_type=file限制类型1.  浏览器支持2. 定义和用法3. input举例4.  MIME 类型5. 后缀名类型介绍（1）图片类（2）视频类（3）音频类6. MIME对照表
1.  浏览器支持
Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 6 支持 accept 属性。
注意：Internet Explorer 9 及之前的版本都不支持 <input> 标签的 accept 属性。

2. 定义和用法


			
		

	





	

		

			

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

				
			

			

				

					10-21
				

			

		

		

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

			
		

	





	

		

			

				
					
IE浏览器下的Input File详解

				
			

			

				

					binggoogle的专栏
				

				

					08-07
					
					4579
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					yunduanaoligei的博客
				

				

					12-16
					
					1881
					
				

			

		

		

			
				
今天分享下”“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙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
					
					9435
					
				

			

		

		

			
				
实现上传文件

			
		

	





	

		

			

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

				
			

			

				

					cc的博客
				

				

					12-14
					
					7502
					
				

			

		

		

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

			

		

		

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

			

		

		

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

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

			
		

	





	

		

			

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

				
			

			

				

					鹏飞的专栏
				

				

					01-09
					
					2925
					
				

			

		

		

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

			
		

	





	

		

			

				
					
<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" type="text/css" href="./CSS/index.css">     <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>     <title>Document</title> </head>  <body>      <div class="divclass">          <button onclick="getLogIn()">log in</button>          <hr>          <input type="file" id="uploadFile" name="uploadFile" />         <button onclick="addFile()" type="submit">提交</button>          <hr>          <input type="text" id="downloadfilename">         <button onclick="downloadFile()" target="new target">下载</button>      </div> </body> <!-- http://127.0.0.1:8082/localTest/upload --> <!-- http://127.0.0.1:8082/localTest/testDownload --> <script>     function getLogIn() {         window.location.href = "./pages/login.html";     }       function downloadFile() {         var filename = document.getElementById("downloadfilename").value;         //window.open("http://127.0.0.1:8082/localTest/testDownload?filename=" + encodeURI(filename));         window.open("http://127.0.0.1:8088/api/DownloadByCustomer?filename=" + encodeURI(filename));     }        function addFile() {         var formData = new FormData();         formData.append("file1", document.getElementById('uploadFile').files[0]);         $.ajax({             url: 'http://127.0.0.1:8088/admApi/admUpload',              type: 'POST',              data: formData, // 上传formdata封装的数据包              //dataType: 'JSON',             timeout: 10000,              cache: false, // 不缓存              processData: false, // jQuery不要去处理发送的数据              contentType: false, // jQuery不要去设置Content-Type请求头              success: function (res) {                 console.log(res)                 console.log("上传成功");                 return alert("上传成功");             },             error: function (sd) {                 console.log(sd)                 console.log("上传失败");                 return alert("上传失败");             }         });     };   </script>  </html>

				
			

			

				

					06-03
				

			

		

		

			
				
其中，上传文件的代码使用了 jQuery 的 ajax 方法，将文件数据包装为 ...下载文件的代码使用了 window.open 方法，将文件名作为参数拼接在 URL 后面进行下载。页面中的地址都是本地地址，需要根据实际情况进行修改。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值