JS实现HtmlFile控件赋值【转】
⽂章出处:
⽹上搜索了半天也没有完整的解决⽅案。
⽤以下⽅法需要添加到信任站点或解除未签名的ActiveX控件的禁⽤
1. 模拟键盘输⼊法: 不⾜的地⽅是不⽀持中⽂
把<input type="file" />设计只读且不允许⾃动赋值的⽬的是出于安全性考虑,试想⼀下,如果允许程序⾃动赋值,那么也可以在服务器⽣成页⾯时放置⼀段脚本,在浏览器访问该页⾯后,⾃动把本地的某⼀个重要⽂件路径赋值到⼀个⽂件上传控件,然后⾃动上传到服务器,那会是多可怕的事情!! ⼀个恶意⽹站就可以把我们机器上的⼀些机密⽂件神不知⿁不觉地盗⾛了.
既然不允许赋值,在有些情况下⼜要求实现⽂件⾃动上传,到底能不能实现呢? 有⼀种办法,就是模拟键盘输⼊来达到赋值的⽬的,先贴代码:
1<input name="myfile" type="file" />
2
3<script language="JavaScript">
4window.attachEvent("onload", setfile);
5var WshShell=new ActiveXObject("WScript.Shell");
6function setfile(){
7    setTimeout('file.focus();WshShell.sendKeys("C:/java/sdfs/11/11.jpg");',20);
8}
9</script>
这段代码是通过WScript.Shell控件来实现模拟键盘输⼊的效果:
WshShell.sendKeys("C:/java/sdfs/11/11.jpg");
在模拟键盘输⼊之前,先把光标定位在要操作控件上:
file.focus();
在给下⼀控件赋值之前,先停⼀段时间:
setTimeout('file.focus();WshShell.sendKeys("C:/java/sdfs/11/11.jpg");',20);
这样做的⽬的是因为focus操作花费的时间⽐较长,⽽sendKeys操作⼜很快,如果不加上延时,sendKeys操作⼀般都在focus之前就执⾏完了,导致输⼊框接收不到输⼊值。
2. 把⽂件先复制到剪切再粘贴到Input File 控件中,可以解决中⽂问题
项⽬需求是⾃动搜索客户端的图⽚,到合适的⾃动上传(理论上能上传任何东西)前提就是上⾯提到的.
⽤这个⽅法经测试成功.上传OK!(注意不安全哟,不要⽤此做坏事哟,此源码只做交流,请不要⽤于⾮法⽤途)
⼤概写⼀下流程:
1<HTML>
2 <HEAD>
3  <TITLE> 冲击多个Input File赋值兼解决中⽂赋值问题 </TITLE>
4<SCRIPT LANGUAGE="JavaScript">
5//简化写法
6function $(id)
7{
8    ElementById(id);
9}
10//崋值⽅法(就是将⽂本框的值赋值file对象)
11function set1()
12{
13    //将text1中的值复制到剪贴板中
14    window.clipboardData.setData('text',$('t1').value);
15    //创建Shell(需要添加到信任站点或解除未签名的ActiveX控件的禁⽤
16    var  WshShell=new  ActiveXObject("WScript.Shell");
17    //拿到焦点
18    $('f1').focus();
19    //Ctrl + A 操作
20    WshShell.sendKeys("^a");
21    //Ctrl + V 操作(sendKeys对于中⽂赋值操作显得⽆⼒,所以只能模拟键盘操作)
22    WshShell.sendKeys("^v");
23}
24
25function set2()
26{
27    window.clipboardData.setData('text',$('t2').value);
28    var  WshShell=new  ActiveXObject("WScript.Shell");
29    $('f2').focus();
30    WshShell.sendKeys("^a");
31    WshShell.sendKeys("^v");
32}
33
34function set3()
35{
36    window.clipboardData.setData('text',$('t3').value);
37    var  WshShell=new  ActiveXObject("WScript.Shell");
38    $('f3').focus();
39    WshShell.sendKeys("^a");
40    WshShell.sendKeys("^v");
41}
42
43function set4()
44{
45    window.clipboardData.setData('text',$('t4').value);
46    var  WshShell=new  ActiveXObject("WScript.Shell");
47    $('f4').focus();
48    WshShell.sendKeys("^a");
49    WshShell.sendKeys("^v");
50}
51//给当前⽹页中四个file对象赋值的⽅法
52function set()
53{
54    //此处不要⽤循环,有⼏个就需要写⼏个setXX⽅法
55    setTimeout("set1()",0);
56    setTimeout("set2()",70);
57    setTimeout("set3()",240);
58    setTimeout("set4()",340);
59}
60//检查是否赋值成功
61function check()
62{
63    //检查每个file对象是否为空
64    if($('f1').value.length > 0 && $('f2').value.length > 0 && $('f3').value.length > 0 && $('f4').value.length > 0 )
65    {
66        //检查原对象的值的赋值对象的值是否相同
67        if($('f1').value == $('t1').value && $('f2').value == $('t2').value && $('f3').value == $('t3').value && $('f4').value == $('t4').value)
68        {
69            return true;
70        }
71        else
72        {
73            return false;
74        }
75    }
76    else
77    {
78        return false;
79    }
80}
81//赋值和file对象的检查
82function setValues()
83{
84    if(!check())
85    {
86        set();
87    }
88}
89//直接调⽤的赋值⽅法
90function callSet()
91{
92    //⼀定要⽤setInterval,⽽不能⽤循环(循环太快,会造成所有的值赋在⼀个file对象上)
93    setInterval('setValues()',1000);
94}
95
96 </SCRIPT>
97 </HEAD>
98
99 <BODY>
100    <input type=text value='c:\a好.jpg' id='t1' /> <br />
101    <input type=text value='b:\b不好.jpg' id='t2'/> <br />
102    <input type=text value='c:\c好.jpg' id='t3'/> <br />
103    <input type=text value='d:\c很好.jpg' id='t4'/> <br />
104
105    <input type=file id='f1'/> <br />
106    <input type=file id='f2'/> <br />
107    <input type=file id='f3'/> <br />
108    <input type=file id='f4'/> <br />
109
110    <input type='button' id='btn1' οnclick='callSet();' value='测试'>
111 </BODY>
html代码转链接
112</HTML>
3. 清空Input File 控件value属性值
在 HTML ⽂档中,<input type="file"> 标签是浏览器向服务器发送选中⽂件的。该元素有⼀个 value 属性,保存了⽤户指定的⽂件的名称,为安全起见,file-upload 元素的value 属性是只读的,不允许程序员修改它的值,并且HTML value 属性也会被忽略。不过有时候我们需要将这个标签的value的值清空,这就需要我们动动脑筋了。
假设我们已经得到了该file input的对象,为file_input_obj,下⾯是两种修改该标签value属性的⽅法:
⽅法⼀:
file_input_obj.outerHTML=file_input_place(/(value=\").+\"/i,"$1\"");
我们也可以根据这个思路,举⼀反三,⽐如先对该标签进⾏克隆,然后再替换掉该节点,等等,随便你怎么发挥都⾏。
⽅法⼆:
var WshShell=new ActiveXObject("WScript.Shell");
file_input_obj.focus();
file_ateTextRange().select();
WshShell.SendKeys("{del}");
使⽤这中⽅式,需要允许ActiveX控件,所以推荐使⽤第⼀个⽅法
这既解决了我们遇到的问题,同时也为我们提供了⼀种解决问题⽅式,我们可以⽤类似的⽅法去解决类似的问题。
本⽂转⾃:
最终结果:我在IE9上测试了,不能使⽤

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。