在不刷新页面的情况下以表单上传文件

Posted

技术标签:

【中文标题】在不刷新页面的情况下以表单上传文件【英文标题】:Uploading file in a form without page refresh 【发布时间】:2011-08-04 01:21:46 【问题描述】:

我有这段代码:

<form name="myUploadForm" method="post" action="/scripts/upload.do" enctype="multipart/form-data" id="fileUpload">
   <table  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 上传文件,但它会刷新页面。在不刷新页面的情况下如何执行此操作?

【问题讨论】:

可能欺骗ajax - How can I upload files asynchronously with JQuery? - Stack Overflow 【参考方案1】:

什么对我有用:

在表单标签上,我有 target="hidden-iframe"

页面上隐藏的 i-frame 如下所示:

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

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

【讨论】:

viralpatel.net/blogs/… @FlorianB 该博客的日期为 2008 年。(而且,我知道,您的评论日期为 2016 年!)【参考方案2】:

您可以使用 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>

【讨论】:

【参考方案3】:

有两种方法:

    HTML5 支持文件 API。 创建一个隐藏的 iframe,将表单的属性“target”指向 iframe 的 ID。

【讨论】:

【参考方案4】:

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

【讨论】:

以上是关于在不刷新页面的情况下以表单上传文件的主要内容,如果未能解决你的问题,请参考以下文章

AJAX:在不刷新页面的情况下发布表单详细信息[重复]

如何在不刷新整个页面的情况下更新 HTML 文档中的 php 变量?

如何在不刷新页面的情况下显示错误?

在 Rails 4 中,如何在不刷新的情况下在页面上提交表单和更新元素

javascript - 有没有办法在不刷新页面的情况下在 div 上上传和预览图像(替换背景图像)?

如何在不刷新页面的情况下使用 django-crispy-forms 实现引导模式表单