jQuery Ajax 文件上传

Question

我可以使用以下 jQuery 代码使用 ajax 请求的 POST 方法执行文件上传吗？

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

如果可能的话，我需要填写 data 部分吗？这是正确的方法吗？我只将文件发布到服务器端。

我一直在谷歌搜索，但我发现是一个插件，而在我的计划中我不想使用它。至少目前是这样。

原文由 Willy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

无法通过 AJAX 上传文件。

您可以使用 IFrame 上传文件，而无需刷新页面。

您可以 在此处 查看更多详细信息。

---

更新

XHR2 支持通过 AJAX 上传文件。例如通过 FormData 对象，但不幸的是，所有/旧浏览器都不支持它。

FormData 支持从以下桌面浏览器版本开始。

• IE 10+

• 火狐 4.0+

• 铬 7+

• 野生动物园 5+

• 歌剧 12+

有关更多详细信息，请参阅 MDN 链接。

原文由 Adeel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

通过 ajax 上传文件不再需要 iframe。我最近自己做了。查看这些页面：

通过 AJAX 和 jQuery 使用 HTML5 文件上传

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

更新了答案并进行了清理。使用 getSize 函数检查大小或使用 getType 函数检查类型。添加了进度条 html 和 css 代码。

 var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

如何使用上传类

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

进度条html代码

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

进度条CSS代码

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

原文由 JohannesAndersson 发布，翻译遵循 CC BY-SA 3.0 许可协议