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


How to submit file upload form with ajax?

可能的重复项:
阿贾克斯文件上传

是否可以使用 JQuery 编写一个 ajax 请求来"提交"带有文件字段的表单?我想这样做,因为这样我就可以让用户在不离开当前页面的情况下上传文件。

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

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

谢谢。

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

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

<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>

有一些项目可以使这更容易,例如 Plupload

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

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