首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用ajax提交文件上传表单?

如何使用ajax提交文件上传表单?
EN

Stack Overflow用户
提问于 2011-12-06 13:14:08
回答 2查看 2.6K关注 0票数 0

可能重复: Ajax文件上传

用JQuery编写ajax请求是否可能“提交”带有文件字段的表单?我想要这样做,因为这样我可以使用户上传一个文件而不离开当前页面。

我应该如何编写$.ajax()调用?特别是,我应该如何设置为ajax调用文件字段?

编辑:我想只使用核心JQuery函数,没有插件。

谢谢。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-12-06 13:17:05

为了保持与最广泛的浏览器的兼容性,这需要通过隐藏的iframe来完成。

下面是一些示例代码来演示我的意思:

代码语言:javascript
复制
<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>

有一些项目可以使这更容易,比如冥王星

票数 2
EN

Stack Overflow用户

发布于 2011-12-06 13:17:02

这很难。使用已经存在的服务要好得多。

我最近在一个站点上这样做,因为我需要提交整个表单而不需要重新加载页面,而上传是我找到的最好的AJAX文件上传器。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8400488

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档