点击按钮实现文件上传

45 阅读 0 评论 30 点赞

我是靠谱客的博主淡定日记本，最近开发中收集的这篇文章主要介绍点击按钮实现文件上传，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

通过点击按钮实现上传的主要目的是对用户友好。新浪微博则是通过点击文本实现图片上传。

一个简单的例子：

<form method="post" action="http://localhost/" enctype="multipart/form-data">
        <input type="button" value="请选择文件" size="30" οnclick="f.click()" />
        <input type="file" id="f" οnchange="this.form.submit()" name="f" style="position:absolute; filter:alpha(opacity=0); opacity:0; width:30px; " size="1" />
</form>

如上例子在 Firefox 4 和 Chrome 11 上正常运行。由于 IE 的怪异表现，若在点击按钮时触发上传文件的字段的 click 事件，即使选中了文件也无法成功上传文件。 IE 8 给出的错误信息是“无法访问”。据说原因是“这个是ie居于安全性考虑的限制。input file必须使用手动触发click事件”。

我们把上述例子修改如下：

<form method="post" action="http://localhost/" enctype="multipart/form-data">
<input type="button" οnmοusemοve="move(event)" value="请选择文件" size="30" />
<input type="file" id="f" οnchange="this.form.submit()" name="f" style="position:absolute; filter:alpha(opacity=0); opacity:0; width:30px; " size="1" />
</form>
<script type="text/javascript">
function move(event){
var event=event||window.event;
var a=document.getElementById('f');
    a.style.left=event.clientX-50+'px';
    a.style.top=event.clientY-10+'px';
}
</script>

跟上个例子相比，为按钮添加了 onmousemove 事件，主要目的是鼠标移动至按钮时，把上传文件字段置于鼠标下，这样点击按钮时实际上点击的是上传文件字段，而不是这个按钮。再次在 IE 下测试，可以上传文件了。

一切看起来很正常，一个潜在的问题是若页面内容超出一屏范围，而很不幸的是按钮和上传字段不在同一屏，问题产生了，点击按钮无法出现选择文件的对话框。这是由于使用了 clientX 和 clientY 事件属性，而 clientY 的坐标不考虑文档的滚动。解决方案是用 jquery 的 pageX 事件属性。它实现了跨浏览器支持。

原文出自：http://blog.csdn.net/rainyjune/article/details/6877975