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

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

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>
原文地址:https://www.cnblogs.com/yangzhilong/p/2880101.html