JS实现Html File控件赋值

2025-11-01 13:30:28

网上搜索了半天也没有完整的解决方案。用以下方法需要添加到信任站点或解除未签名的ActiveX控件的禁用

1. 模拟键盘输入法: 不足的地方是不支持中文

设计只读且不允许自动赋值的目的是出于安全性考虑,试想一下,如果允许程序自动赋值,那么也可以在服务器生成页面时放置一段脚本,在浏览器访问该页面后,自动把本地的某一个重要文件路径赋值到一个文件上传控件,然后自动上传到服务器,那会是多可怕的事情!! 一个恶意网站就可以把我们机器上的一些机密文件神不知鬼不觉地盗走了. 既然不允许赋值,在有些情况下又要求实现文件自动上传,到底能不能实现呢? 有一种办法,就是模拟键盘输入来达到赋值的目的,先贴代码:

这段代码是通过WScript.Shell控件来实现模拟键盘输入的效果: WshShell.sendKeys("C:/java/sdfs/11/11.jpg"); 在模拟键盘输入之前,先把光标定位在要操作控件上: document.all.myfile.focus(); 在给下一控件赋值之前,先停一段时间: setTimeout('document.all.myfile.focus();WshShell.sendKeys("C:/java/sdfs/11/11.jpg");',20); 这样做的目的是因为focus操作花费的时间比较长,而sendKeys操作又很快,如果不加上延时,sendKeys操作一般都在focus之前就执行完了,导致输入框接收不到输入值。

2. 把文件先复制到剪切再粘贴到Input File 控件中,可以解决中文问题

项目需求是自动搜索客户端的图片,找到合适的自动上传(理论上能上传任何东西)前提就是上面提到的.用这个方法经测试成功.上传OK!(注意不安全哟,不要用此做坏事哟,此源码只做交流,请不要用于非法用途)

大概写一下流程:

冲击多个Input File赋值兼解决中文赋值问题









3. 清空Input File 控件value属性值

在 HTML 文档中 , 标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性,保存了用户指定的文件的名称,为安全起见,file-upload 元素的value 属性是只读的,不允许程序员修改它的值,并且HTML value 属性也会被忽略。不过有时候我们需要将这个标签的value的值清空,这就需要我们动动脑筋了。

假设我们已经得到了该file input的对象,为file_input_obj,下面是两种修改该标签value属性的方法:

方法一:

file_input_obj.outerHTML=file_input_obj.outerHTML.replace(/(value=\").+\"/i,"$1\"");

我们也可以根据这个思路,举一反三,比如先对该标签进行克隆,然后再替换掉该节点,等等,随便你怎么发挥都行。

方法二:

var WshShell=new ActiveXObject("WScript.Shell");

file_input_obj.focus();

file_input_obj.createTextRange().select();

WshShell.SendKeys("{del}");

使用这中方式,需要允许ActiveX控件,所以推荐使用第一个方法

这既解决了我们遇到的问题,同时也为我们提供了一种解决问题方式,我们可以用类似的方法去解决类似的问题。