AJAX 文件上傳/表單提交沒有 jquery 或 iframe？

Question

是否可以在沒有 jQuery 或 IFrame（所以只是純 JavaScript）的情況下提交 AJAX 表單？ 我目前正在發送到一個有效的 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 的文件？

Answer 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，請嘗試以下操作

• http://www.albanx.com/?pid=5&subid=21
• 使用jsp和javascript進行異步文件上傳（AJAX文件上傳）

Answer 2

http://fineuploader.com/是一個ajax文件上傳器。

此插件使用XHR上傳多個文件，其中包含FF3.6 +，Safari4 +，Chrome中的進度條，並在其他瀏覽器中回退到隱藏的基於iframe的上傳，從而在各處提供良好的用戶體驗。

Answer 3

可以在此處找到最新的（2022 年 3 月）純 js 解決方案。 概括：

您可以選擇使用fetch和 await-try-catch

 let photo = document.getElementById("image-file").files[0]; let formData = new FormData(); formData.append("photo", photo); fetch('/upload/image', {method: "POST", body: formData});

Answer 4

無需添加jquery或任何其他第三方庫，只需添加IPerfect JS庫就可以了。

IP_uploadFile（URL，的responseType，此[對象]，[dynamicFunctionForResponse]）

如果用戶選擇responseType為'html'，那么dynamicFunctionForResponse將以HTML格式獲得響應。 在下面的示例中，您將在警報中獲得“完成”響應。

HTML

    <script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>


    <script language='javascript'>
    function testResponse(data){
    alert(data)
    }
    </script>

身體

    <form method="POST" enctype="multipart/form-data"  onsubmit="IP_uploadFile('testupload.php','html',this,testResponse); return false;">
        <input type="file" name="file1">
        <input type="submit" name="submit1" value="Click here">
    </form>

PHP：testupload.php

    move_uploaded_file($_FILES['file1']['tmp_name'], realpath("./")."/upload/".$_FILES["file1"]["name"]);
    echo "done";