注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

蜻蜓点水 举重若轻

君子终日乾乾

 
 
 

日志

 
 

在网页中实现单击图片立即上传文件  

2007-08-01 15:38:35|  分类: 某些技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

点击图片弹出文件浏览框, 选择文件点击确定便立即上传文件 ── 这被认为是一种不可能实现的技术。因为本博是变态的, 所以这里当然要讲解一下了。不过江湖凶险, 本博还是建议大伙不要轻易尝试。


好了, 下面我们就根据这张例图, 从左到右一步一步地讲解。


第一步, 找一张很帅很帅的图片

我们需要一张很帅的图片作为上传按钮, 这是所有步骤中最关键和最为困难的一步。花了九牛二虎之力, 在下终于找到了一张举世无双的帅气图片 (见上面的例图), 无疑我们已经成功了 99%。


第二、第三、第四步

使用浮动层把透明的文件上传控件 (的按钮部分) 覆盖到图片上。这样用户去点图片, 其实点到的是文件上传控件的 "浏览按钮"。这样, 用户的感觉好像是点击了这个图片才弹出文件选择框的。


设定文件上传控件的 onchange 事件, 实现选定文件立即上传

设置文件上传控件的 "onchange" 事件, 立即调用文件上传表单 (form) 的 "submit()" 方法。这样用户使用文件选择框选择好文件, 单击确定, 文件上传过程就立即开始了。


使用透明文件上传按钮盖住图片的关键

  • 我们只需要文件上传控件的按钮部分, 如果无法隐藏文件上传控件左半边的字符输入框部分, 就把他移出屏幕。
  • 如果文件上传控件不够大, 不能完全覆盖图片, 就修改控件的字体大小, 增加 font-size 就可以搞大文件上传控件按钮的大小。
  • 如果还是不够大, 就用两个文件上传控件来覆盖图片。

当然上述技巧都相当地恶心。这也是博主忠告诸位不要轻易尝试的原因。


代码

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>upload.html, 一个文件上传按钮, 用于 iframe 嵌入</title>
<script language="JavaScript">
window.do_upload = function(n) {
if(document.getElementById('upload').value == '')
return;

document.getElementById('upload_display').style.display = 'none';
document.getElementById('uploading').style.display = '';

var l = filename.split(/[\/\\]/), filename = l[l.length - 1];

// TODO: 本窗口将被用于提交文件,
// 请在父窗口 ( window.parent) 再生成一个文件上传按钮

document.forms[n].submit();
};
</script>
</head>
<body style="padding: 0px; margin: 0px; vertical-align: middle; text-align: center;">
<span id="upload_display">
<img src="http://9.douban.com/mpic/s2356949.jpg"
style="position: absolute; left: 0px; top: 0px;"/>
<form action="upload.cgi" method="post" enctype="multipart/form-data">
<input id="upload" name="upload" type="file" onchange="do_upload(0)"
style="position: absolute; top: 0px; font-size: 44px; left: -640px; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0;" />
<form action="upload.cgi" method="post" enctype="multipart/form-data">
<input id="upload" name="upload" type="file" onchange="do_upload(1)"
style="position: absolute; top: 60px; font-size: 44px; left: -640px; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0;" />
</form>
</span>

<span id="uploading" style="display: none; font-size: 12px; color: #961;">uploading ...</span>

</body>
</html>

最后一步, 使用 iframe 在需要上传的地方嵌入这个页面

<iframe src="upload.html" border="0" frameborder="no" style="width: 124px; height: 124px;"></iframe>

  评论这张
 
阅读(2436)| 评论(17)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017