Загрузка/отправка AJAX-файла без jQuery или iframes?

можно ли отправить форму AJAX без jQuery или IFrames (так что просто чистый JavaScript)? В настоящее время я отправляю struts fileUploadAction, который работает. Будет ли код действия по-прежнему работать с асинхронной отправкой или требуются дополнения для получения асинхронной формы отправки?

Я использую распорки 1.x и текущая моя форма:

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

можно ли отправить эту форму и, следовательно, файл, загруженный с помощью AJAX?

6
ajax asyncfileupload javascript struts

3 ответов

Если я правильно понял, вы можете использовать следующий код для загрузки файла async. Измените его, как вам нравится

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 попробуйте следующее

10

http://fineuploader.com/ файл-загрузчик "Аякс".

этот плагин использует XHR для загрузки нескольких файлов с прогресс-баром в FF3.6+, Safari4+, Chrome и возвращается к скрытой загрузке на основе iframe в других браузерах, обеспечивая хороший пользовательский опыт повсюду.

3

нет необходимости добавлять jquery или любую другую стороннюю библиотеку, просто добавьте библиотеку IPerfect JS, и вам хорошо идти.

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

если пользователь выбирает responseType как "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>

тело

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