一个图片按钮实现的文件上传

最新推荐文章于 2022-07-19 21:55:42 发布

iteye_237

最新推荐文章于 2022-07-19 21:55:42 发布

阅读量296

点赞数

分类专栏：技术学习文章标签： JavaScript HTML XML ViewUI

技术学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

做了很多的尝试,最后才在某位高手大叔的博客里,找到答案.

原先的实习思路是用样式控制的,让文件控件不显示出来,在另外一个按钮的点击事件里头调用她的onClick事件:代码如下:

xml 代码

<form name="aForm" method="post" >
<input type="file" name="filepath" class="ap" >form>

function chooseFile(){
var aForm=document.forms['aForm'];
aForm.filepath.click();
var filepath=aForm.filepath.value;
if(filepath==""){
alert("你没有选择文件");
}else {
aForm.submit();
}
}

后果是:提交到后,得不到文件路径.原因是,file这个控件,它不能由让其他的控件触发它,不然得不到值.所以白做了.

后来,项目经理给了个思路,用动态生成的file控件试下,结果,还是不行.因为file控件,是只读的,不能通过其它的方式赋值,只有自己控件本身才能. 所以还是不行.

后来:哈哈~用透明的.既然隐藏不行,动态也不行,那就玩下透明的总可以吧...HOHO..具体代码如下:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>本窗口将被用于提交文件, 在父窗口再生成一个文件上传按钮title>
<style>
.alpha{position: absolute;
top: 0px; font-size: 44px;
left: -640px; -moz-opacity:0;
filter:alpha(opacity: 0); opacity: 0;}
.imgP{position: absolute; left: 0px; top: 0px;}
style>
<script language="JavaScript">
window.do_upload = function(n) {
var filename=document.getElementById('upload').value;
if(document.getElementById('upload').value == '') return;
if(n==0){
document.getElementById('upload_display').style.display = 'none';
document.getElementById('upload_ndisplay').style.display = 'block';
}else if(n==1){
document.getElementById('upload_display').style.display = 'block';
document.getElementById('upload_ndisplay').style.display = 'none';
}
var l = filename.split(/[\/\\]/),
filename = l[l.length - 1];
parent.doSendInfo(filename);
document.forms[n].submit();
};
script>
head>
<body style="padding: 0px; margin: 0px; vertical-align: middle; text-align: center;">
<span id="upload_display">
<img src="/images/im/topimg/sendfile.gif" class="imgP"/>
<form action="/chat/file.shtml?method=doFile" method="post" enctype="multipart/form-data">
<input id="upload" name="upload" type="file" onchange="do_upload(0)" class="alpha"/>
span>
<span id="upload_ndisplay" style="display: none;" >
<img src="/images/im/topimg/sendfile.gif" class="imgP"/>
<form action="/chat/file.shtml?method=doFile" method="post" enctype="multipart/form-data">
<input id="upload" name="upload" type="file" onchange="do_upload(1)" class="alpha" />form>
span>
body>
html>

这是调用的部分:

<iframe id=imgForm name=imgForm src="/chat/file.shtml?method=upload"
border="0" frameborder="no" style="width:27px; height:30px;" scrolling="no" >iframe>

用了两个file控件,因为第一个提交后,让另外一个代替它.还是返回原来的界面~这样,在用户看来,那个按钮好象没变一样~哈哈~

iteye_237

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个图片按钮实现的文件上传

做了很多的尝试,最后才在某位高手大叔的博客里,找到答案.原先的实习思路是用样式控制的,让文件控件不显示出来,在另外一个按钮的点击事件里头调用她的onClick事件:代码如下:xml 代码 &lt;form name="aForm" method="post" &gt; &lt;input type="file" name="filepath" class=...
复制链接

扫一扫

专栏目录