Question

可能重复：
Ajax file upload

是否可以使用JQuery编写ajax请求“提交”带有文件字段的表单？我想这样做是因为通过这种方式我可以让用户上传文件而无需离开当前页面。

我该怎么写$ .ajax（）调用？特别是我应该如何设置ajax调用文件字段？

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

感谢。

Answer 1

为了保持与最广泛的浏览器的兼容性，这需要通过隐藏的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

Answer 2

这很难。你最好使用已经存在的服务。

我最近在网站上做了这个，因为我需要在不重新加载页面的情况下提交整个表单，uploadify是我找到的最好的AJAX文件上传器。

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

2 个答案: