Question

是否可以在没有jQuery或IFrame的情况下提交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上传文件？

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，请尝试以下

Answer 2

http://fineuploader.com/是一个ajax文件上传器。

此插件使用XHR上传多个文件，其中包含FF3.6 +，Safari4 +，Chrome中的进度条，并在其他浏览器中回退到隐藏的基于iframe的上传，从而在各处提供良好的用户体验。

Answer 3

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

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

如果用户选择responseType为＆＃39; html＆＃39;然后dynamicFunctionForResponse将以HTML格式获得响应。在下面的示例中，您将完成“＃39;警报响应。

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";

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

3 个答案: