上传文件，而无需刷新页面

我有这段代码：上传文件，而无需刷新页面

<form name="myUploadForm" method="post" action="/scripts/upload.do" enctype="multipart/form-data" id="fileUpload"> 
    <table width="100%" border="0"> 
     <tr> 
     <td> 
      <input type="file" name="xlsFile" size="60" value="test.xls"> 
      <input type="button" value="Upload File" name="upload_xls"> 
     </td> 
     </tr> 
    </table> 
</form>

现在我可以上传与Struts的文件，但它刷新页面。如何在不刷新页面的情况下做到这一点？

来源

2011-04-12 Mark

可能欺骗[阿贾克斯 - 我如何异步用jQuery上传文件？ - [Stack Overflow]（http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery） – MikeM 2011-04-12 16:32:08

如果你可以使用jQuery，你可以使用像jQuery File Upload之类的东西。

来源

2011-04-12 16:27:35 Town

有两种方法：

HTML5支持文件API。
创建一个隐藏的iframe，将表单的属性'target'指向iframe的id。

来源

2013-08-11 09:52:11 HaleDeng

什么工作对我来说：

在表单标签，我有目标= “隐藏的iframe”

在页面上隐藏的iframe如下：

<iframe name="hidden-iframe" style="display: none;"></iframe>

这里强调的重要一点是，表格参考框架的名称属性，而不是ID。

来源

2013-12-09 18:38:30

http://viralpatel.net/blogs/ajax-style-file-上传-使用隐藏的iframe / – FlorianB 2016-08-15 14:43:47

你可以用jQuery发表表单并获得结果。

$('#formId').submit(
 
    function(e) { 
 
     $.ajax({ 
 
      url: '/upload', 
 
      type: 'POST', 
 
      data: new FormData(this), 
 
      processData: false, 
 
      contentType: false, 
 
      success: function(result){ 
 
       console.log(result); 
 
       //$("#div1").html(str); 
 
      } 
 
     }); 
 
     e.preventDefault(); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="formId" action="/upload" enctype="multipart/form-data" method="post"> 
 
     <input type="text" name="title"><br> 
 
     <input type="file" name="upload" multiple="multiple"><br> 
 
     <input type="submit" value="Upload"> 
 
</form> 
 
<div id="div1"> 
 
</div>

来源

2017-04-23 09:19:38

上传文件，而无需刷新页面

回答

相关问题