JS实现Html File控件赋值

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

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

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

?
1
2
3
4
5
6
7
8
9
<input name="myfile" type="file" />     
      
<script language="JavaScript">     
window.attachEvent("onload", setfile);      
var WshShell=new ActiveXObject("WScript.Shell");      
function setfile(){       
    setTimeout('document.all.myfile.focus();WshShell.sendKeys("C:/java/sdfs/11/11.jpg");',20);         
}     
</script>

这段代码是通过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!(注意不安全哟,不要用此做坏事哟,此源码只做交流,请不要用于非法用途)

大概写一下流程:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<HTML> 
 <HEAD> 
  <TITLE> 冲击多个Input File赋值兼解决中文赋值问题 </TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
//简化写法 
function $(id) 
{ 
    return document.getElementById(id); 
} 
//崋值方法(就是将文本框的值赋值file对象) 
function set1() 
{ 
    //将text1中的值复制到剪贴板中 
    window.clipboardData.setData('text',$('t1').value);  
    //创建Shell(需要添加到信任站点或解除未签名的ActiveX控件的禁用 
    var   WshShell=new   ActiveXObject("WScript.Shell");   
    //拿到焦点 
    $('f1').focus(); 
    //Ctrl + A 操作 
    WshShell.sendKeys("^a"); 
    //Ctrl + V 操作(sendKeys对于中文赋值操作显得无力,所以只能模拟键盘操作) 
    WshShell.sendKeys("^v"); 
} 
   
function set2() 
{ 
    window.clipboardData.setData('text',$('t2').value);  
    var   WshShell=new   ActiveXObject("WScript.Shell");   
    $('f2').focus(); 
    WshShell.sendKeys("^a"); 
    WshShell.sendKeys("^v"); 
} 
   
function set3() 
{ 
    window.clipboardData.setData('text',$('t3').value);  
    var   WshShell=new   ActiveXObject("WScript.Shell");   
    $('f3').focus(); 
    WshShell.sendKeys("^a"); 
    WshShell.sendKeys("^v"); 
} 
   
function set4() 
{ 
    window.clipboardData.setData('text',$('t4').value);  
    var   WshShell=new   ActiveXObject("WScript.Shell");   
    $('f4').focus(); 
    WshShell.sendKeys("^a"); 
    WshShell.sendKeys("^v"); 
} 
//给当前网页中四个file对象赋值的方法 
function set() 
{ 
    //此处不要用循环,有几个就需要写几个setXX方法 
    setTimeout("set1()",0); 
    setTimeout("set2()",70); 
    setTimeout("set3()",240); 
    setTimeout("set4()",340); 
} 
//检查是否赋值成功 
function check() 
{ 
    //检查每个file对象是否为空  
    if($('f1').value.length > 0 && $('f2').value.length > 0 && $('f3').value.length > 0 && $('f4').value.length > 0 ) 
    { 
        //检查原对象的值的赋值对象的值是否相同 
        if($('f1').value == $('t1').value && $('f2').value == $('t2').value && $('f3').value == $('t3').value && $('f4').value == $('t4').value) 
        { 
            return true; 
        } 
        else 
        { 
            return false; 
        } 
    } 
    else 
    { 
        return false; 
    } 
} 
//赋值和file对象的检查 
function setValues() 
{ 
    if(!check()) 
    { 
        set(); 
    } 
} 
//直接调用的赋值方法 
function callSet() 
{ 
    //一定要用setInterval,而不能用循环(循环太快,会造成所有的值赋在一个file对象上) 
    setInterval('setValues()',1000); 
} 
   
 </SCRIPT> 
 </HEAD> 
   
 <BODY> 
    <input type=text value='c:\a好.jpg' id='t1' /> <br /> 
    <input type=text value='b:\b不好.jpg' id='t2'/> <br /> 
    <input type=text value='c:\c好.jpg' id='t3'/> <br /> 
    <input type=text value='d:\c很好.jpg' id='t4'/> <br /> 
   
    <input type=file id='f1'/> <br /> 
    <input type=file id='f2'/> <br /> 
    <input type=file id='f3'/> <br /> 
    <input type=file id='f4'/> <br /> 
       
    <input type='button' id='btn1' onclick='callSet();' value='测试'> 
 </BODY> 
</HTML>

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

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

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

方法一：

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

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

方法二：

?
1
2
3
4
var WshShell=new ActiveXObject("WScript.Shell");
file_input_obj.focus();
file_input_obj.createTextRange().select();
WshShell.SendKeys("{del}");

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

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

posted @   多见多闻  阅读(1687)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· c# cef3 模拟浏览器上传文件
· JS开发Wps插件
· 常见问题——fileinput.js上传文件，不显示文件名的中文
· html文件上传控件file自定义样式
· 前端工作小结86-给input动态赋值
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示