`
viproc
  • 浏览: 46361 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

JS实现Html File控件赋值

html 
阅读更多

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

 

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

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

 

Html代码 收藏代码
  1. <inputname="myfile"type="file"/>
  3. <scriptlanguage="JavaScript">
  4. window.attachEvent("onload",setfile);
  5. varWshShell=newActiveXObject("WScript.Shell");
  6. functionsetfile(){
  7. setTimeout('document.all.myfile.focus();WshShell.sendKeys("C:/java/sdfs/11/11.jpg");',20);
  8. }
  9. </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!(注意不安全哟,不要用此做坏事哟,此源码只做交流,请不要用于非法用途)

大概写一下流程:

Html代码 收藏代码
  1. <HTML>
  2. <HEAD>
  3. <TITLE>冲击多个InputFile赋值兼解决中文赋值问题</TITLE>
  4. <SCRIPTLANGUAGE="JavaScript">
  5. //简化写法
  6. function$(id)
  7. {
  8. returndocument.getElementById(id);
  9. }
  10. //崋值方法(就是将文本框的值赋值file对象)
  11. functionset1()
  12. {
  13. //将text1中的值复制到剪贴板中
  14. window.clipboardData.setData('text',$('t1').value);
  15. //创建Shell(需要添加到信任站点或解除未签名的ActiveX控件的禁用
  16. varWshShell=newActiveXObject("WScript.Shell");
  17. //拿到焦点
  18. $('f1').focus();
  19. //Ctrl+A操作
  20. WshShell.sendKeys("^a");
  21. //Ctrl+V操作(sendKeys对于中文赋值操作显得无力,所以只能模拟键盘操作)
  22. WshShell.sendKeys("^v");
  23. }
  25. functionset2()
  26. {
  27. window.clipboardData.setData('text',$('t2').value);
  28. varWshShell=newActiveXObject("WScript.Shell");
  29. $('f2').focus();
  30. WshShell.sendKeys("^a");
  31. WshShell.sendKeys("^v");
  32. }
  34. functionset3()
  35. {
  36. window.clipboardData.setData('text',$('t3').value);
  37. varWshShell=newActiveXObject("WScript.Shell");
  38. $('f3').focus();
  39. WshShell.sendKeys("^a");
  40. WshShell.sendKeys("^v");
  41. }
  43. functionset4()
  44. {
  45. window.clipboardData.setData('text',$('t4').value);
  46. varWshShell=newActiveXObject("WScript.Shell");
  47. $('f4').focus();
  48. WshShell.sendKeys("^a");
  49. WshShell.sendKeys("^v");
  50. }
  51. //给当前网页中四个file对象赋值的方法
  52. functionset()
  53. {
  54. //此处不要用循环,有几个就需要写几个setXX方法
  55. setTimeout("set1()",0);
  56. setTimeout("set2()",70);
  57. setTimeout("set3()",240);
  58. setTimeout("set4()",340);
  59. }
  60. //检查是否赋值成功
  61. functioncheck()
  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. returntrue;
  70. }
  71. else
  72. {
  73. returnfalse;
  74. }
  75. }
  76. else
  77. {
  78. returnfalse;
  79. }
  80. }
  81. //赋值和file对象的检查
  82. functionsetValues()
  83. {
  84. if(!check())
  85. {
  86. set();
  87. }
  88. }
  89. //直接调用的赋值方法
  90. functioncallSet()
  91. {
  92. //一定要用setInterval,而不能用循环(循环太快,会造成所有的值赋在一个file对象上)
  93. setInterval('setValues()',1000);
  94. }
  96. </SCRIPT>
  97. </HEAD>
  99. <BODY>
  100. <inputtype=textvalue='c:\a好.jpg'id='t1'/><br/>
  101. <inputtype=textvalue='b:\b不好.jpg'id='t2'/><br/>
  102. <inputtype=textvalue='c:\c好.jpg'id='t3'/><br/>
  103. <inputtype=textvalue='d:\c很好.jpg'id='t4'/><br/>
  105. <inputtype=fileid='f1'/><br/>
  106. <inputtype=fileid='f2'/><br/>
  107. <inputtype=fileid='f3'/><br/>
  108. <inputtype=fileid='f4'/><br/>
  110. <inputtype='button'id='btn1'onclick='callSet();'value='测试'>
  111. </BODY>
  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_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控件，所以推荐使用第一个方法

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

 

分享到：
| php jquery之ajax上传文件 ajaxfileupload. ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    file控件无法赋值解决实例

    解决无法为FIle控件赋值的问题！并且支持中文赋值问题

    解析使用JS 清空File控件的路径值

    这种方法较为巧妙，通过获取File控件的outerHTML，然后再将其赋值回自身，实质上是创建了一个新的File控件并替换原有的控件。在IE浏览器中，这种做法可以清空File控件的值。但是，这种方法在非IE浏览器，如Firefox中...

    input file的默认value清空与赋值方法

    关于`input file`的默认value清空与赋值方法，这里涉及到的是网页编程中的一个特定知识点。由于出于安全性考虑，JavaScript默认不允许直接修改`input`元素中的`file`类型的value值。但是，我们仍然有一些技巧性的...

    HTML上传控件取消选择

    总结来说，HTML的文件上传控件取消选择可以通过JavaScript实现，具体方法取决于控件的显示状态。对于显示的控件，可以尝试使用`execCommand("delete")`，但这种方法的可靠性较低。而使用`outerHTML`属性则是更为推荐...

    HTML5实现磁带音乐播放炫酷效果,可以自己添加音乐

    在“HTML5实现磁带音乐播放炫酷效果”这个项目中，开发者可能结合了CSS3动画和JavaScript来模拟磁带的外观和播放动作，比如卷带、播放头移动等效果，给用户带来视觉上的惊喜。CSS3提供了丰富的动画和过渡效果，如`@...

    jQuery获取file控件中图片的宽高与大小

    为了实现跨浏览器的兼容性，并提供一个更通用的解决方案，函数 getImageWidthAndHeight 被封装起来，该函数接收一个 id 参数来指定需要操作的 file 控件的 ID，以及一个 callback 函数，用于在图片信息准备好后进行...

    html5文件上传输入框样式代码.zip

    总结来说，HTML5文件上传输入框样式代码的实现涉及到HTML的`&lt;input type="file"&gt;`标签、CSS的样式设计以及JavaScript的事件监听和文件操作。通过这些技术，我们可以创建出符合网站整体风格、功能强大的文件上传组件...

    HTML编辑器.rar

    当用户点击预览按钮时，可以将HTMLTextBox中的内容赋值给WebBrowser控件的`DocumentText`属性，实时呈现HTML效果。 虽然这个编辑器的描述提到功能不全，但作为初学者的实践项目，它可以教会用户如何在C#环境下开发...

    javascript 读取文本文件.rar

    在JavaScript中，读取文本文件是一项常见...结合HTML5的`&lt;input type="file"&gt;`元素，我们可以实现用户交互式的文本文件读取和处理。然而，要注意的是，所有的操作都必须在用户明确授权下进行，以遵循浏览器的安全策略。

    用javascript实现把表格内容导出到excel和把excel里面内容导入表格的方法归类.pdf

    在JavaScript中，我们可以实现将HTML表格的内容导出到Excel文件，以及从Excel文件导入到HTML表格的功能。这两种操作对于数据的交互和管理非常有用，尤其是在客户端没有安装Excel软件的环境中。 首先，我们来看如何...

    java\JavaScript利用ActiveX导出Excel,Word .doc

    在不支持或不允许使用ActiveX的环境中，可以使用其他技术，如HTML5的File API、CSV格式或Excel/Word的开放XML格式来实现数据导出。例如，可以将HTML表格转换为CSV字符串，然后提供下载链接让用户下载。对于更复杂的...

    使用FileUpload上传图片实现图片预览

    `FileUpload`控件在客户端表现为一个HTML的`&lt;input type="file"&gt;`元素，允许用户选择本地文件进行上传。 #### 图片预览的实现原理 图片预览的核心在于读取用户选择的文件，并将其转换为可以在网页上显示的格式。在...

    清空上传控件input file的值

    在网页设计和开发中，`&lt;input type="file"&gt;` 是一个常见的HTML元素，用于创建一个文件上传控件。用户可以通过这个控件选择本地文件，然后将其上传到服务器。然而，有时我们需要在用户选择文件后或者在特定条件下清空...

    如何通过js实现图片预览功能【附实例代码】

    在本文中，我们主要探讨了如何通过JavaScript实现图片预览功能，并提供了相关的实例代码供读者参考。在开始深入探讨之前，我们需要了解几个重要的知识点： 1. HTML的基本结构：一个简单的HTML页面通常包括`&lt;!...

    大名鼎鼎SWFUpload- Flash+JS 上传

    　file_queue_limit : 2, 上传队列数量限制，该项通常不需设置，会根据file_upload_limit自动赋值 　flash_url : "http://www.swfupload.org/swfupload_f9.swf", Flash控件的URL 　flash_width : "1px", 　flash_...

    asp.net获取HTML表单File中的路径的方法

    首先需要了解HTML表单中的File控件是允许用户选择文件进行上传的。而***通过一个名为HttpFileCollection的集合来管理这些上传的文件。 在***中，当一个带有File控件的表单提交时，服务器会接收到一系列的文件信息。...

    清空input类型为file的value属性值的方法

    在HTML中，`&lt;input&gt;`标签用于创建交互式控件，使用户可以输入数据。当`&lt;input&gt;`元素的`type`属性设置为`file`时，它允许用户选择一个或多个文件。 标题中提到的“清空input类型为file的value属性值的方法”，涉及到...

    我收集的一些js的题目

    * file：文件上传控件 * button：按钮 * image：图片按钮 * submit：提交按钮 * reset：重置按钮 * hidden：隐藏输入框 在 HTML 中，table 标签中 border 属性用于设置表格边界，cellpadding 属性用于设置单元格内...

Magicbox
Global site tag (gtag.js) - Google Analytics