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

Is it possible to do an AJAX form submit without jQuery or IFrames (so just pure JavaScript)? I'm currently sending to a struts fileUploadAction that works. Would the action's code still work with the asynchronous submit, or are there additions required to pick up the async form submit?

是否可以在不使用jQuery或iframe(纯JavaScript)的情况下进行AJAX表单提交?我目前正在发送一个struts fileUploadAction，它可以工作。动作的代码是否仍然可以与异步提交一起工作，还是需要添加一些内容来获取异步表单提交?

I am using struts 1.x and current my form is:

我使用的是struts 1。我现在的表格是:

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

Can this form be submitted, and thus the file uploaded with AJAX?

是否可以提交此表单，并使用AJAX上传文件?

3 个解决方案

#1

If I understood you correct, you can use the following code to upload the file async. Modify it as you like

如果我理解正确，您可以使用以下代码来异步上传文件。你想怎么修改就怎么修改

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;
        });
    }

To upload the form use the FormData class, populate it with form values and post it with XHR.

要上载表单，请使用FormData类填充表单值并使用XHR发布它。

Update: For HTML4 try the following

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

http://www.albanx.com/?pid=5&subid=21
http://www.albanx.com/?pid=5&subid=21
Asynchronous file upload (AJAX file upload) using jsp and javascript
使用jsp和javascript的异步文件上传(AJAX文件上传)。

#2

http://fineuploader.com/ is a ajax file-uploader.

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

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

该插件使用XHR上传多个文件，带有FF3.6+、Safari4+、Chrome的progress-bar，并退回到其他浏览器中基于iframe的隐藏上传，提供了良好的用户体验。

#3

-3

No need to add jquery or any other third party library, just add IPerfect JS library and you are good to go.

无需添加jquery或任何第三方库，只需添加IPerfect JS库即可。

IP_uploadFile(URL,responseType,this[object],[dynamicFunctionForResponse])

responseType IP_uploadFile(URL,这(对象),[dynamicFunctionForResponse])

if user select responseType as 'html' then dynamicFunctionForResponse will get response in HTML format. In below example you will get 'done' response in alert.

如果用户选择responseType as 'html，那么dynamicFunctionForResponse将以html格式得到响应。在下面的示例中，您将在alert中完成响应。

HTML

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


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

Body

身体

    <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

PHP:testupload.php

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

#1