1

可能重复：
通过 JQuery 中的 AJAX
上传文件如何在不提交表单的情况下轻松上传文件（使用 jQuery + AJAX）

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

有小费吗？？提前致谢。

4

5 回答 5

0

试试这个 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'
});

有关更多信息，请查看文档

于 2012-05-31T16:13:23.210 回答
0

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

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

于 2012-05-31T16:15:41.327 回答
0

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

  1. 创建一个处理上传文件并可以返回错误的 php 文件 ( echo)。
  2. 使用您的表单和所有内容创建一个 HTML 页面
  3. 创建一个 jquery 函数：
    • 避免提交表单
    • 为您在第一步中创建的 php 文件创建一个 ajax 请求
    • 在 div 中显示 php 文件的结果。
于 2012-05-31T16:21:59.027 回答
0

您需要使用 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 一样。

于 2012-05-31T16:36:29.220 回答
0

取决于你的需要。

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

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

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

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

于 2012-05-31T16:19:24.023 回答