问题描述
是否可以使用JQuery编写ajax请求提交一个文件字段的表单?我想这样做,因为通过这种方式,我可以让用户上传文件而不会离开当前页面。
我应该如何编写$ .ajax()调用?特别是我应该如何设置成ajax调用文件字段?编辑:我想只使用核心JQuery函数,没有插件。
感谢。
为了与最广泛的浏览器保持兼容性,通过一个隐藏的iframe完成。
下面是一些示例代码,用于演示我的意思:
< iframe name =my_iframeid =my_iframestyle =display:none;>< / iframe>
< form action =/ next_step.phpmethod =posttarget =my_iframeentype =multipart / form-data>
< input type =filename =file_upload/>
< input type =buttonid =upload_btnvalue =上传文件/>
< label for =name>名称< / label>
< input type =textname =nameid =name/>
< input type =submitvalue =下一步/>
< / form>
< script type =text / javascript>
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms [0];
//通过隐藏的iframe直接上传文件
form_elem.action ='/test_file.php';
form_elem.target ='my_iframe';
//提交表单
form_elem.submit();
};
< / script>
有些项目使得这更简单,例如
Is it possible to write an ajax request with JQuery that "submits" a form with a file field? I want to do it because in this way i can make the user upload a file without leaving the current page.
How should i write the $.ajax() call? and in particular how should i set into the ajax call the file field?
EDIT: I'd like to use only core JQuery functions, without plugins.
Thanks.
To maintain compatibility with the widest range of browsers this needs to be done through a hidden iframe.
Here is some sample code to demonstrate what I mean:
<iframe name="my_iframe" id="my_iframe" style="display: none;"></iframe>
<form action="/next_step.php" method="post" target="my_iframe" entype="multipart/form-data">
<input type="file" name="file_upload" />
<input type="button" id="upload_btn" value="Upload file" />
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<input type="submit" value="Next step" />
</form>
<script type="text/javascript">
var btn = document.getElementById('upload_btn');
btn.onclick = function(){
var form_elem = document.forms[0];
// direct file uploads through the hidden iframe
form_elem.action = '/test_file.php';
form_elem.target = 'my_iframe';
// submit the form
form_elem.submit();
};
</script>
There are projects out there that make this easier such as Plupload
这篇关于如何使用ajax提交文件上传表单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!