JS兑现Html File控件赋值

JS实现Html File控件赋值

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

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

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

<HTML><HEAD><TITLE>冲击多个InputFile赋值兼解决中文赋值问题</TITLE><SCRIPTLANGUAGE="JavaScript">//简化写法function$(id){returndocument.getElementById(id);}//值方法(就是将文本框的值赋值file对象)functionset1(){//将text1中的值复制到剪贴板中window.clipboardData.setData('text',$('t1').value);//创建Shell(需要添加到信任站点或解除未签名的ActiveX控件的禁用varWshShell=newActiveXObject("WScript.Shell");//拿到焦点$('f1').focus();//Ctrl+A操作WshShell.sendKeys("^a");//Ctrl+V操作(sendKeys对于中文赋值操作显得无力,所以只能模拟键盘操作)WshShell.sendKeys("^v");}functionset2(){window.clipboardData.setData('text',$('t2').value);varWshShell=newActiveXObject("WScript.Shell");$('f2').focus();WshShell.sendKeys("^a");WshShell.sendKeys("^v");}functionset3(){window.clipboardData.setData('text',$('t3').value);varWshShell=newActiveXObject("WScript.Shell");$('f3').focus();WshShell.sendKeys("^a");WshShell.sendKeys("^v");}functionset4(){window.clipboardData.setData('text',$('t4').value);varWshShell=newActiveXObject("WScript.Shell");$('f4').focus();WshShell.sendKeys("^a");WshShell.sendKeys("^v");}//给当前网页中四个file对象赋值的方法functionset(){//此处不要用循环,有几个就需要写几个setXX方法setTimeout("set1()",0);setTimeout("set2()",70);setTimeout("set3()",240);setTimeout("set4()",340);}//检查是否赋值成功functioncheck(){//检查每个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){returntrue;}else{returnfalse;}}else{returnfalse;}}//赋值和file对象的检查functionsetValues(){if(!check()){set();}}//直接调用的赋值方法functioncallSet(){//一定要用setInterval,而不能用循环(循环太快,会造成所有的值赋在一个file对象上)setInterval('setValues()',1000);}</SCRIPT></HEAD><BODY><inputtype=textvalue='c:\a好.jpg'id='t1'/><br/><inputtype=textvalue='b:\b不好.jpg'id='t2'/><br/><inputtype=textvalue='c:\c好.jpg'id='t3'/><br/><inputtype=textvalue='d:\c很好.jpg'id='t4'/><br/><inputtype=fileid='f1'/><br/><inputtype=fileid='f2'/><br/><inputtype=fileid='f3'/><br/><inputtype=fileid='f4'/><br/><inputtype='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属性的方法：
方法一：
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控件，所以推荐使用第一个方法

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

JS兑现Html File控件赋值

热点推荐