Question

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

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

任何提示？提前谢谢。

Answer 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'
});

有关详细信息，请查看文档

Answer 2

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

在https://github.com/blueimp/jQuery-File-Upload

上查看

Answer 3

取决于您的需求。

对于单个文件，http://valums.com/ajax-upload/是好的

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

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

uploadify支持flash和html5用于多文件选择

Answer 4

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

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

Answer 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
        });
    });
}

更多信息：https://developer.mozilla.org/en/XMLHttpRequest/FormData

您还可以使用示例HTML和一些其他功能查看lib：http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

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

如何使用JQuery Ajax上传文件

5 个答案: