通过点击按钮实现上传的主要目的是对用户友好。新浪微博则是通过点击文本实现图片上传。
一个简单的例子:
<form method="post" action="http://localhost/" enctype="multipart/form-data">
<input type="button" value="请选择文件" size="30" onclick="f.click()" />
<input type="file" id="f" onchange="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" onmousemove="move(event)" value="请选择文件" size="30" />
<input type="file" id="f" onchange="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
分享到:
相关推荐
本地预览文件的功能
运用apache的fileupload库实现文件上传,运用jxl分析导入的excel数据。 只需在现有页面上添加一个“导入”按钮就可实现excel导入数据库的功能,点击“导入”按钮,选择要上传的文件后会立即开始上传。 采用iframe的...
本文主要介绍了js实现点击按钮弹出上传文件的窗口的实例方法。具有很好的参考价值,需要的朋友一起来看下吧
通过浏览按钮,选择需要上传的文件,点击控件上传按钮而实现的上传
jQuery+ajax实现文件上传功能 jQuery+ajax实现文件上传功能(显示文件上传进度),供大家参考,具体内容如下 具体实现步骤 1、定义UI结构,引入bootstrap的CSS文件和jQuery文件 2、给上传按钮绑定点击事件 3、验证...
文件管理-上传与下载系统:该子系统主要是... 该子系统采用ASP.NET(C#)+IIS,主要分为上传页面和下载页面,通过点击上传按钮可以把本地的文件上传到服务器上,同时通过下载按钮可以把服务器上的文件下载到本地电脑。
导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 icon=el-icon-upload type=primary size=mini click=importFile() >批量导入</el
由html5实现上传预览功能,可进行拖拽图片,也可点击按钮上传图片,预览可以删除图片
2.点击页面上的加一个会增加一个上传按钮,实现同时上传多个文件。 3.如果是eclipse开发工具,上传之后的文件保存在路径D:\develop\resource\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\...
点击按钮,弹出文件选择框 选中图片并确认后直接上传图片 实现这个功能,需要使用<input>来添加文件,并实现上传功能。传统的上传文件是将<input>放到<form>中提交,但在这个场景中并不存在form...
本篇文章主要介绍了vue中用H5实现文件上传的方法实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
就是你选择a,b,c文件上传,然后点击删除按钮进行删除,删除后再上传a,b,c它就会提示你说是否要替换文件。按道理来说根本就不需要这样的 好了,下面来做js文件的修改吧,还是修改jquery.uploadify.min.js
需求是在浏览器中点击某个按钮,打开本地的某个exe文件。上传代码直接修改reg中的路径(里面包含所有行的说明信息),执行reg之后,打开代码中的网页,点击即可测试使用。
jsp中点击图片弹出文件上传界面及实现预览实例详解 花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处...
再让点击自定义按钮时触发原来的选择文件按钮的事件即可 (对此,label可实现) eg: html: css样式: 结果图: 点击“选择图片”按钮,则会触发选择图片的事件,你就可以选择图片啦! 以上,是用bootstrap实现的...
没有多余插件
javascript实现 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...jquery文件上传</title> <script typ
此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选择文件行消失,当所有选择文件项都消失时,上传按钮将被隐藏起来。下面是实例代码: ...