当前位置: 首页 > 面试题库 >

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

郤旭东
2023-03-14
问题内容

是否可以在没有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上传文件吗?


问题答案:

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

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,请尝试以下操作

  • http://www.albanx.com/?pid=5&subid=21


 类似资料:
  • 问题内容: 我意识到这个问题的变体已经出现了很多次,但是我找不到在这种情况下能回答这个问题的人。 我正在使用第三方fileuploader,该文件利用jQuery并在文件上传完成时给出成功回调。 我要实现的是一个带有文本字段的表单以及fileuploader,当您单击“提交”时,该表单将触发上传功能(文件开始使用进度条开始上传),并等待成功回调之前继续提交表格。 我必须立即承认我是jQuery的白

  • 问题内容: 我需要快速说明如何使用隐藏的iframe上传AJAX样式的文件。这是与表单有关的HTML代码部分: 以下是相关的PHP: 因此,从本质上讲,PHP获取了文件并检查它是否是文本文件。然后,我想在JavaScript中访问返回的json。那是我感到困惑的地方… 理想情况下,上传完成并加载iframe后,应调用 但是,这始终是空白。本质上,returnVals放置在iframe主体中,但是在

  • 问题内容: 我可以使用以下jQuery代码使用ajax请求的POST方法执行文件上传吗? 如果可能,我是否需要填写部分?这是正确的方法吗?我只将文件发布到服务器端。 我一直在搜索,但是我发现是一个插件,而在我的计划中我不想使用它。至少目前是这样。 问题答案: 上传文件是 不是 有可能通过AJAX。 您可以使用来上传文件,而无需刷新页面。 更新 使用XHR2,支持通过AJAX上传文件。例如通过对象,

  • 问题内容: 我已经尝试上传一个简单的文本文件了几个小时,但似乎仍然无法正常工作。 我不断收到无效的表格,说我缺少“ file_source”。 为什么“ file_source”没有发布? 我还可以发送“ file_source”,但是它仍然说它丢失了。应该为Django FileFiled提供哪种类型的元素? Django表格: Django模板(呈报形式): jQuery / Ajax上传:

  • 问题内容: 我想在我的Intranet页面上实现一个简单的文件上传,并使用最小的设置。 这是我的HTML部分: 这是我的JS jQuery脚本: 网站的根目录中有一个名为“ uploads”的文件夹,具有“用户”和“ IIS_users”的更改权限。 当我选择具有文件格式的文件并按下上载按钮时,第一个警报将返回“ [object FormData]”。第二个警报不会被调用,“上传”文件夹也为空!

  • 我想在我的内联网页面中实现一个简单的文件上传,尽可能使用最小的设置。 这是我的HTML部分: 这是我的JS jquery脚本: 在网站的根目录中有一个名为“uploads”的文件夹,具有“users”和“IIS_users”的更改权限。 当我使用文件表单选择一个文件并按下上载按钮时,第一个警报返回“[object FormData]”。第二个警报未被调用,“上载”文件夹也为空!? 有人能帮我找出问