1. 首页
  2. 问题
  3. 没有jquery或iframe的AJAX文件上传/表单提交？
小编典典

没有jquery或iframe的AJAX文件上传/表单提交？

ajax

是否可以在没有jQuery或IFrames的情况下提交AJAX表单（因此仅是纯JavaScript）？我当前正在发送到有效的struts
fileUploadAction。操作的代码是否仍可与异步提交一起使用，或者是否需要进行其他操作以获取异步表单提交？

我正在使用struts 1.x，目前我的表单是：

<html:form action="fileUploadAction" method="post" enctype="multipart/form-data">
    ...form elements...
    <html:file property="theFile" />
    ...other elements...
</html:form>

可以提交此表格，从而通过AJAX上传文件吗？


阅读 301

收藏
2020-07-26

共1个答案

小编典典

如果我理解正确，则可以使用以下代码异步上传文件。随意修改

var AjaxFileUploader = function () {
    this._file = null;
    var self = this;

    this.uploadFile = function (uploadUrl, file) {
        var xhr = new XMLHttpRequest();
        xhr.onprogress = function (e) {
            ...
        };

        xhr.onload = function (e) {
            ...
        };

        xhr.onerror = function (e) {
            ...
        };

        xhr.open("post", uploadUrl, true);

        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("X-File-Type", file.type);

        xhr.send(file);
    };
};

AjaxFileUploader.IsAsyncFileUploadSupported = function () {
    return typeof (new XMLHttpRequest().upload) !== 'undefined';
}

 if (AjaxFileUploader.IsAsyncFileUploadSupported) {
        ajaxFileUploader = new AjaxFileUploader();

        $("form").submit(function () {
            var uploader = $("#fileUploader")[0];

            if (uploader.files.length == 0) {
                return;
            } else {
                ajaxFileUploader.uploadFile(
                    "/YourUploadUrl",
                    uploader.files[0]);
            }

            return false;
        });
    }

要上传表单，请使用FormData类，使用表单值填充该表单，然后使用XHR进行发布。

更新： 对于HTML4，请尝试以下操作

2020-07-26