实现无选择框的上传和无打开窗口的下载

效果说明：实现无文件选择框上传，无弹出框下载，上传过程中上传按钮禁用

1、按钮页面：

HTML代码

<div >
    <button  icon='upload' id='uploadBt' onclick='doUpload()'>上传</button>

    <button  icon='download' id='downloadBt' onclick='doNowDownload()'>下载</button>
</div>

<div style="display:none">
<iframe id="downloadFrame" name="downloadFrame" src='' width="10" height="10"></iframe>
</div>
<div style="display:none">
  <iframe id="uploadFrame" name="uploadFrame" src='DisplayUploadFile.do?sbcode=${sbcode}' width="10" height="10"></iframe>
</div>

JS代码

//上传下载
var isClick = true;
function doUpload(){
　　if(isClick){
　　　　document.uploadFrame.uploadForm.myfile.click();
　　}else{
　　　　alert("正在上传中,请稍候!");
　　}
} 
//文件下载

function doNowDownload(){
　　var id = getChoiceRowID();
　　if(id){
　　　　document.getElementById("downloadFrame").src='<of:ActionTag action="downloadFile.do"/>' + '?id=' + id;
　　}
}

 

2、隐藏起来的带有文件选择框的JSP页面

<%@page contentType="text/html;charset=utf-8"%>
<html>
<body>
　　<form name="uploadForm" method="post" id="uploadForm" target="DummyFrame" action="UploadFile.do" enctype="multipart/form-data">
　　　　<input type="file" name="myfile" id="myfile" onchange="javascript:doSubmit(this)"/>
　　</form>
　　<iframe name="DummyFrame" frameborder=0 width='0' height="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border: 0px #CCCCCC solid" src=""></iframe>
</body>
<script>
function doSubmit(obj){
　　var filename = obj.value;
　　if(""!=filename){
　　　　parent.window.isClick = false;
　　　　parent.window.document.getElementById("uploadBt").disabled = true;
　　　　document.getElementById("uploadForm").submit();
　　}
}
</script>
</html>

 

3、结果显示页面

<%@page contentType="text/html;charset=utf-8"%>
<script>
var isOk = "${isOk}";
var sbcode = "${sbcode}";
var ele = '<input type="hidden" name="sbcode" value="' + sbcode
+ '" /><input type="file" name="myfile" id="myfile" onchange="javascript:doSubmit(this)"/>'; //重写控件，下次选择同一文件时onchange事件才能被调用
parent.document.getElementById("uploadForm").innerHTML = ele;
parent.parent.window.isClick = true;
parent.parent.window.document.getElementById("uploadBt").disabled = false;
alert("${msg}");
if(isOk){
　　parent.parent.window.doSearch();
}
</script>
posted @ 2013-01-28 16:07  自行车上的程序员  阅读(501)  评论(0)  编辑  收藏  举报