在不刷新页面的情况下以表单上传文件
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 之类的东西。
【讨论】:
以上是关于在不刷新页面的情况下以表单上传文件的主要内容,如果未能解决你的问题,请参考以下文章
如何在不刷新整个页面的情况下更新 HTML 文档中的 php 变量?
在 Rails 4 中,如何在不刷新的情况下在页面上提交表单和更新元素