4

この質問をできるだけ簡単にしようと思います。JQueryを使用してAJAX送信を介して追加のフォームデータを含むファイルをアップロードしたい(ただし、ie 7またはie 8と互換性があり、非同期でもあるため)

送信が JQuery 経由の AJAX 送信でない場合、プロセスは正常に機能します。つまり、次のことを行いました。

  1. 宣言された CommonsMultipartResolver
  2. コントローラーでこのハンドラーメソッドを書きました

@RequestMapping(value="/processfileupload", method = RequestMethod.POST) public @ResponseBody String handleFileUpload(UploadForm data, BindingResult result) throws Exception {

  ....

}

UploadForm は、フォームにバインドした Spring MVC フォーム オブジェクトです。また、Spring の form タグに formObject を次のようにバインドしました: enctype="multipart/form-data" .. など..

私が言ったように、JQuery を介した Ajax 呼び出しを介して行われなければ、完全に機能します。Ajax 呼び出しにしようとすると、ファイルは常に null になります。

これは、JQuery を介した Ajax 呼び出しです。

関数 submitFileUploadViaAjax() {

   $.ajax({

        url: "processfileupload",
        data: $("#file_upload_form").serialize(),
        type: "POST", 
        processData: false,
        contentType: false,

        success: function(data) {
                $(response).html(data);
        },

        error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.readyState == 0 || xhr.status == 0) {
                    // not really an error
                    return;
                } else {
                    alert("XHR Status = "+xhr.status);
                    alert("Thrown Error = "+thrownError);
                    alert("AjaxOptions = "+ajaxOptions)
                }
          }

    });

}

問題は次のように思われます: data: $("#file_upload_form").serialize(),

同様の問題を抱えている人が formData オブジェクトを使用するための推奨される解決策をいくつか読みましたが、これは IE 7 または IE 8 と互換性がないことを読みました。これは本当ですか?

JQueryファイルアップロードプラグインが機能することも読みました（https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data）が、よくわかりませんフォームデータをフォームオブジェクトにバインドし、それをコントローラーに注入するだけのSpringの優れた方法で、これをSpringに接続できれば。

ファイル (比較的小さい) をアップロードする最良の方法について考えている人はいますか? そして、ほとんどのブラウザと互換性があるソリューションですが、特に ie 7 または ie 8 で動作します (これらのブラウザで動作することが要件です)。

本当にありがとう！

  • ロッコ
4

4 に答える 4

9

AJAX を使用したファイルのアップロードが可能です: これを試してください

クライアント側: HTML

<input type="file" name="file" id="fileLoader" /> 
<input type="button" id="fileSubmit" value="Upload"/>

クライアント側：JS

var files = [];
$(document)
        .on(
                "change",
                "#fileLoader",
                function(event) {
                 files=event.target.files;
                })

$(document)
        .on(
                "click",
                "#fileSubmit",
                function() {
                processUpload();
                })

function processUpload()
          {
              var oMyForm = new FormData();
              oMyForm.append("file", files[0]);
             $
                .ajax({dataType : 'json',
                    url : "the url",
                    data : oMyForm,
                    type : "POST",
                    enctype: 'multipart/form-data',
                    processData: false, 
                    contentType:false,
                    success : function(result) {
                        //...;
                    },
                    error : function(result){
                        //...;
                    }
                });
          }

サーバー側：JAVA

@RequestMapping(method = RequestMethod.POST, value = "the url")
    @ResponseBody
    public void uploadFile(@RequestParam("file") MultipartFile multipartFile) {
            //...
    }
于 2015-02-27T10:07:57.347 に答える
2

これは私にとって魅力のように機能しました：

$('#formId').submit(function(evt) {

            evt.preventDefault();

            var formData = new FormData(this);

            $.ajax({
            type: 'POST',
            url: "/url",
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success: function(data) {
               alert('success');
            },
            error: function(data) {
                alert('failed');
            }
            });
        });
于 2016-08-17T16:05:55.783 に答える
0

ファイルをアップロードするには、formdata を使用します。

function collectFormData(fields) {
    var formData = new FormData();

    for (var i = 0; i < fields.length; i++) {
        var $item = $(fields[i]);

        if ($item.attr('type') =="file"){
            var file = $('input[type=file]')[0].files[0];
            formData.append( $item.attr('name') , file);

        } else {
            formData.append( $item.attr('name') , $item.val());
        }
    }
    return formData;
}

そして送信：

    var fields = form.find('input, textarea, select');
    var formData = collectFormData(fields);


    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        scriptCharset: "utf-8",
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 600000,
        success: function (response) {
            if (response.status == "SUCCESS"){
                console.log("SUCCESS...");
                $( document ).trigger( "SUCCESS", [ response ] );
            } else if (response.status == "FAIL"){
                console.log("FAIL...");
                clearErrors(form);

                ...
            }
        }
    })
于 2016-05-03T13:43:19.087 に答える
-3

AJAX を使用したファイルのアップロードはできません。AJAX は実際にはフォームをサーバーにポストしません。選択したデータを POST または GET 要求の形式でサーバーに送信します。JavaScript はユーザーのマシンからファイルを取得してサーバーに送信することができないため、AJAX では不可能です。通常の古いフォーム送信に頼る必要があります。

このリンクに従ってください: http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/ 例

于 2013-10-15T06:56:58.023 に答える