不能使用脚本操作INPUTTYPE=File的value

本文介绍了HTML中INPUT TYPE=File元素的安全限制,即无法通过脚本设置默认文件名。探讨了背后的原理并提供了一个使用ActiveX控件的解决方案。

PRB: Cannot Use Script to Manipulate INPUT TYPE=File Value

Article ID:266087
Last Review:May 11, 2006
Revision:3.0
This article was previously published under Q266087

SYMPTOMS

If you use an INPUT TYPE=File element in an HTML FORM element, you cannot set a file name programmatically, regardless if you use script or set the VALUE property of the INPUT element to a default value.

CAUSE

Because INPUT TYPE=File allows arbitrary files to be uploaded from a user's computer to a remote server, setting this field programmatically is considered a security risk and is not supported.

RESOLUTION

Uploading content from a user's computer without his or her knowledge is contrary to the security paradigms of Web development. The user should be informed whenever content is going to be transferred off their computer, and the user should be given every opportunity to control or cancel the operation.

If you require such functionality in your Web-based application, use an ActiveX control that is marked unsafe for scripting and/or unsafe for initialization. (The author of the control is responsible for telling users that the control is unsafe because, by definition, uploading files are unsafe. You can sign the control to ask users to trust your control.)

MORE INFORMATION

Steps to Reproduce Behavior

1.In any text editor, create the following HTML file, and save the file as TestFileSubmit.htm:
<HTML>

<HEAD>
<TITLE>Automating Input=File Dialog Boxes</TITLE>

<SCRIPT>

function load() {
	frm1.file1.value = "C:/config.sys";
}

</SCRIPT>

</HEAD>

<BODY bgcolor="#ffffff">

<FORM name="frm1" action="/post.asp" METHOD="POST" 

ENCTYPE="multipart/form-data">
<INPUT type="File" name="file1" value="c:/boot.ini"></INPUT>
</FORM>


</BODY>

</HTML>
					
2.In Internet Explorer 4.x or 5.x, load the page. Notice that none of the values that are assigned to the INPUT TYPE=File element appear in the Edit box.
 
 网络上有的一种解决办法,我试了,并不怎么好使。跟安全性有关系,如果安全性高,代码也是无法运行的。
<SCRIPT LANGUAGE="JavaScript">
 document.getElementById('filename').focus();
 var WshShell=new ActiveXObject("WScript.Shell")
 WshShell.sendKeys("test.txt")
}
### 回答1: input type=file 获取的是文件的路径,而不是文件本身的内容。在HTML中,input type=file用于上传文件,用户选择文件后,文件的路径会被存储在input元素的value属性中。在后台处理上传文件时,需要使用服务器端的脚本来读取文件内容。 ### 回答2: 在HTML中,通过使用input元素的type属性来定义表单中的输入控件类型,其中包括type="file",以便允许用户选择文件上传。当用户选择文件并点击提交表单时,可以使用JavaScript编程实现获取文件名以及文件的其他信息,以下是获取value的主要方法: 1.使用HTMLInputElement的value属性: 在JavaScript编写的onchange事件中,可以通过操作HTMLInputElement的value属性获取用户选择的文件的完整路径,例如: ``` document.getElementById("fileInput").onchange = function() { console.log(this.value); // 可以获取用户选择的完整路径 }; ``` 然而,由于安全性的原因,大多数浏览器都不允许JavaScript访问完整路径,因此这种方法在实际应用中不是很实用。 2.使用FileAPI: 在HTML5中引入了FileAPI,它允许JavaScript访问用户选择的文件并执行一些操作。要使用FileAPI获取用户选择的文件,首先需要获取input元素本身,然后使用该元素的files属性获取用户选择的文件列表,例如: ``` document.getElementById("fileInput").onchange = function() { const file = this.files[0]; console.log(file.name); // 可以获取文件的名称 console.log(file.type); // 可以获取文件的类型 console.log(file.size); // 可以获取文件的大小 }; ``` 使用FileAPI获取文件的信息包括文件名、类型和大小等,而不需要访问完整路径,因此这种方法更加安全和实用。 3.结合FormData使用: 当需要将用户选择的文件通过ajax发送到后台服务器时,可以将File对象传递给FormData对象,以便在请求中包含文件,例如: ``` const formData = new FormData(); formData.append("fileInput", file); ``` 这样可以将文件添加到FormData对象中,并在将FormData对象发送给后台服务器时自动对数据进行编码和格式化。 综上所述,使用FileAPI是获取input type=filevalue的最佳方法,可以获得文件的重要信息而不需要访问完整路径,并且可以结合FormData方便地将文件发送到后台服务器。 ### 回答3: input type=file 是一个 HTML 标签,它用于添加文件上传功能,用户可以通过点击该标签选择本地文件上传到服务器上。 在 HTML 中,我们可以通过 input 的属性来获取用户选择的文件信息,其中最常用的属性是 value。当用户在本地选择了要上传的文件并点击了上传按钮后,浏览器会把本地文件的文件名放在该属性的值中。但是,由于安全性的原因,该属性是只读的,无法通过 JavaScript 或其他编程方式修改其值。 我们可以通过以下方式来获取 input type=filevalue: 1. 使用表单提交:当用户点击了表单中的提交按钮时,表单的所有输入值都会被提交到服务器上,其中 input type=file 的值是所选择的文件的文件名。 2. 在服务器端获取:由于 input type=file 的值无法通过客户端 JavaScript 直接获取,所以我们可以在服务器上获取该值。在服务器处理文件上传请求时,服务器会获取用户上传文件的文件名,并对其进行处理。 总之,input type=file 可以获取用户选择的文件的文件名,并将其用于文件上传操作。但是,该属性是只读的,只能在表单提交或服务器上获取。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值