当前位置: 代码迷 >> JavaScript >> 怎么用javascript 模拟 <input type="file"/> 上传文件
  详细解决方案

怎么用javascript 模拟 <input type="file"/> 上传文件

热度:1085   发布时间:2012-04-20 15:27:03.0
如何用javascript 模拟 <input type="file"/> 上传文件
如题:

比如我知道文件的具体位置e:\aaa.zip

然后我用javascript 还模拟 type file上传文件获取文件流

问题:由于<input type="file"/>这个标签只有你打开文件夹选中文件后,

提交页面在后台能获取文件流,如果你是手动修改value值得话,不会起作用

所以需要用javascript模拟这个操作,

打开文件对话框-》选中文件(已经知道文件路径)-》确认

以上步骤完成后,提交到后台,能获取到文件流

------解决方案--------------------
HTML code

<input type='file' id='loca' style='display:none'>
<input type='button' id='test' value='浏 览'>
<input type='button' id='uper' value='上 传'>
<script>
! +"\v1" || (HTMLElement.prototype.click = function(){
    var eve = this.ownerDocument.createEvent("MouseEvents");
    eve.initMouseEvent("click", true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, 

false, 0, null);
    this.dispatchEvent(eve);
});

function $(o){return document.getElementById(o) || o}
$("test").onclick = function() {
     $("loca").click(); 
}
$("uper").onclick = function() {
     alert($("loca").value); // up data
}
</script>

------解决方案--------------------
楼上的HTMLElement.prototype 应该在IE没效吧

选中文件? 由人来选择?还是也是模拟?

模拟的话,办不到的,这涉及到安全问题,浏览器不允许这么做的

其他的,模拟点击、直接提交,可以做到
------解决方案--------------------
浏览器的开发商 认为 这是一种可能的 潜在的 危害 客户端的行为

因为 不允许 代码编写尝试这样的操作

这个考虑不考虑不在我们 在于浏览器的开发商

当然,在IE下,ActiveX有些可能下

我去翻阅下再来试下...
------解决方案--------------------
楼主可以试试这个控件。
此控件是基于标准HTTP协议实现的文件上传功能。优势是扩展性非常好,整合简单,支持批量上传文件和上传文件夹功能,适合各种简单WEB项目。
另外一个特点是支持自动上传指定的本地文件。



单文件上传演示

单文件整合代码:
JScript code

    服务器返回消息:<input id="txtFilePath" type="text" size="50" />
    <script type="text/javascript" language="javascript">
        var uploaderMgr = new HttpUploaderSingleMgr();
        uploaderMgr.Config["PostUrl"] = "http://localhost:8080/asp.net/upload.aspx";
        uploaderMgr.Load();
        uploaderMgr.CompleteHook = function(msg)
        {
            document.getElementById("txtFilePath").value = msg;
        };

        window.onload = function()
        {
            uploaderMgr.Init();
        };
    </script>

------解决方案--------------------
探讨

楼主可以试试这个控件。
此控件是基于标准HTTP协议实现的文件上传功能。优势是扩展性非常好,整合简单,支持批量上传文件和上传文件夹功能,适合各种简单WEB项目。
另外一个特点是支持自动上传指定的本地文件。



单文件上传演示

单文件整合代码:
JScript code

服务器返回消息:<input id="txtFilePath" type="text" siz……

------解决方案--------------------
探讨

楼主可以试试这个控件。
此控件是基于标准HTTP协议实现的文件上传功能。优势是扩展性非常好,整合简单,支持批量上传文件和上传文件夹功能,适合各种简单WEB项目。
另外一个特点是支持自动上传指定的本地文件。



单文件上传演示

单文件整合代码:
JScript code

服务器返回消息:<input id="txtFilePath" type="text" siz……

------解决方案--------------------
我只是兼容非IE的实现JS触发input的click事件,虽然隐藏了file-input,它的click触发任然通过button-input的手动click所引起,不存在安全限制问题。
至于如何实现文件上传,可看看cloudgamer的研究SITE BY http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html

------解决方案--------------------
websocket

另外 时间不要耗在没意义的东西上面
  相关解决方案