在没有页面刷新的表单中上载文件

Question

I have this bit of code:

<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>

Right now I can upload the file with Struts but it refreshes the page. How do I do this without the page refreshing?

Answer 1

What worked for me:

On the form tag, I have target="hidden-iframe"

the hidden i-frame on the page looks like this:

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

The important thing to underline here is that the form is referencing the name attribute of the frame and not the id .

Answer 2

You can post form with jQuery and get the result back.

 $('#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> 

Answer 3

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

Answer 4

There are two methods:

1. HTML5 supports File API.
2. Create a hidden iframe, point the property 'target' of the form to the iframe's id.