开发者社区> 问答> 正文

iframe无刷新上传,firefox不执行onsubmit

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
  <title>
  
</title>
  <meta charset="UTF-8">
<style type="text/css">
iframe,input,button,li{
height:30px;
}
  
</style>
</head>
<body>
 
  
  
  
<div id='attachment' >   </div>
<ul  id="toolsbar">
 <li id="uploadFile">
   <div  >
     <iframe src="upload/frame.html" frameborder="1"  id="uploadfileFrame"   scrolling="no"></iframe>
  </div>
 </li>  
</ul>
 
<hr>
 
<input  id='msg' />
<button id='send' > SEND </button>
 
 
 
<script type="text/javascript">
 
function $(id){
 
return document.getElementById(id);
 
}
 
var Uploader={
    hasFileReady:false,
    uploadMsg:'',
    filename:'xx.jpg',
 
 
    fireUpload: function(event) {
         
            var fileframe = $("uploadfileFrame").contentWindow.document.getElementById("Button1");
 
            fileframe.click();
       
     
    },
 
 
    startUpload: function(filename) {
        
 
          $("toolsbar").style.display = "none";
 
          $("attachment").innerHTML+="<li><b>"+filename+" </b> X</li> "
 
}
 
};
 
document.getElementById('send').addEventListener('click',function(){
 
Uploader.fireUpload();
 
})
 
 
</script>
</body>
</html>

upload/frame.html


<html>
<head>
 
<script type="text/javascript">
 
 
function fileChange(input){
  
     parent.Uploader.startUpload(input.files[0].name);
      
}
function CheckUpload(){
  
    alert('CheckUpload reutrn true;');
  
    return true;
  
     
}
function checkSubmit(){
    alert('checkSubmit return true');
  
  
    return true;
}
</script>
 
</head>
<body>
 
<form action="/upload.php" method="post"  onsubmit="return  checkSubmit();" 
enctype="multipart/form-data">
  
<input type="file" name="file" id="file"  onchange="fileChange(this);" /> 
<br />
<input type="submit" name="submit" id="Button1" value="Submit"  onclick= "return CheckUpload();" />
</form>
 
</body>
</html>

upload.php

<?php
 
print_r($_FILES);

展开
收起
a123456678 2016-07-18 10:05:58 2288 0
1 条回答
写回答
取消 提交回答
  • 直接获取iframe里面的form执行submit,别用button的click试试。

    2019-07-17 19:57:30
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载