上傳文件，而無需刷新頁面

我有這段代碼：上傳文件，而無需刷新頁面

<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

上傳文件，而無需刷新頁面

回答

相關問題