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

时间:2011-04-12 16:25:43

标签: javascript html ajax forms

我有这段代码:

<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上传文件,但它会刷新页面。如果没有刷新页面,我该怎么做?

4 个答案:

答案 0 :(得分:5)

对我有用的是什么:

在表单标记上,我有target =“hidden-iframe”

页面上隐藏的i-frame看起来像这样:

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

这里要强调的重要一点是表单引用了框架的 name 属性,而不是 id

答案 1 :(得分:1)

如果你可以使用jQuery,你可以使用像jQuery File Upload这样的东西。

答案 2 :(得分:1)

您可以使用jQuery发布表单并返回结果。

&#13;
&#13;
$('#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();
    } 
);
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

有两种方法:

  1. HTML5支持文件API。
  2. 创建隐藏的iframe,将表单的属性“target”指向iframe的id。