如何使用 JQuery Ajax 上传文件 [重复]答案

【问题标题】：How to upload files using JQuery Ajax [duplicate]如何使用 JQuery Ajax 上传文件 [重复]
【发布时间】：2023-04-08 09:10:01
【问题描述】：

可能重复：
File Upload via AJAX within JQuery
How to easily upload files without form submission (with jQuery + AJAX)

我知道我们可以使用带有enctype="multipart/form-data" 的表单上传文件，但我想弄清楚的是使用 Jquery Ajax 上传文件..

有什么建议吗？？提前致谢。

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

试试这个 jQuery 插件http://valums.com/ajax-upload/

然后使用这个javascript代码

var uploader = new qq.FileUploader({
   // pass the element
   element: $(selector)[0],
   // path to server-side upload script
   action: '/server/upload'
});

更多信息请查看文档

【讨论】：

【解决方案2】：

我过去使用过http://blueimp.github.com/jQuery-File-Upload/，它提供了很棒的演示和文档。

查看https://github.com/blueimp/jQuery-File-Upload

【讨论】：

【解决方案3】：

取决于您的需求。

对于单个文件，http://valums.com/ajax-upload/ 就足够了

对于多文件上传 + 多文件选择，您将需要其他技术，如 flash 或 html5，您可以查看plupload 或 Uploadify

plupload 支持 flash、html5、silvernight html4 上传方式。并且还支持多文件选择（html4除外）

uploadify 支持 flash 和 html5 进行多文件选择

【讨论】：

【解决方案4】：

上面提到的插件都很有用，但是如果你想知道这个过程背后的逻辑是这样的：

创建一个处理上传文件并可以返回错误的 php 文件 (echo)。
使用您的表单和所有内容创建一个 HTML 页面
创建一个 jquery 函数来：
- 避免提交表单
- 为您在第一步中创建的 php 文件创建一个 ajax 请求
- 在 div 中显示 php 文件的结果。

【讨论】：

【解决方案5】：

您需要使用 FormData 对象，但它只适用于较新的浏览器。

if (window.FormData) {
    $('input[type=file]').change(function() {
        var formdata = new FormData();
        var file = this.files[0];
        formdata.append("files[]", file);
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false
        });
    });
}

您还可以查看带有示例 HTML 和一些附加功能的 lib：http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

为了支持旧浏览器，您可以制作 iframe，将文件输入元素克隆到 iframe 并在那里提交表单。这样页面就不会刷新了，会像AJAX一样。

【讨论】：