21

私はHTMLフォームを使用して、1回のリクエストで既存のREST APIに3パートをアップロードする必要があります。私はFormDataの提出で境界を設定する方法に関するドキュメントを見つけることができないようです。複数のファイルでjquery ajax FormData()を使用してマルチパート/フォームデータ要求の境界を設定する方法

私はここに挙げた例に従うことをしようとしました:私は境界を設定することができますどのように

Caused by: org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found. 

:私はデータを提出する際 How to send FormData objects with Ajax-requests in jQuery?

は、しかし、それは、次のスタックトレースを拒否されましたか?ここで

はHTML/Javascriptのである:ここで

<script type="text/javascript"> 
    function handleSubmit() { 


     var jsonString = "{" + 
       "\"userId\":\"" + document.formSubmit.userId.value + "\"" + 
       ",\"locale\":\"" + document.formSubmit.locale.value + "\"" + 
       "}"; 

     var data = new FormData(); 
     data.append('Json',jsonString); 
     data.append('frontImage', document.formSubmit.frontImage.files[0]); 
     data.append('backImage', document.formSubmit.backImage.files[0]); 

     document.getElementById("sent").innerHTML = jsonString; 
     document.getElementById("results").innerHTML = ""; 
     $.ajax({ 
        url:getFileSubmitUrl(), 
        data:data, 
        cache: false, 
        processData: false, 
        contentType: 'multipart/form-data', 
        type:'POST', 
        success:function (data, status, req) { 
         handleResults(req); 
        }, 
        error:function (req, status, error) { 
         handleResults(req); 
        } 
       }); 
    } 

</script> 

フォームは次のとおりです。すべての助けを事前に

<form name="formSubmit" action="#"> 
    userId: <input id="userId" name="userId" value=""/><br/> 
    locale: <input name="locale" value="en_US"/><br/> 
    front Image: <input type="file" name="frontImage"/><br/> 
    back Image: <input type="file" name="backImage"/><br/> 
    <input type="button" onclick="handleSubmit();" value="Submit"/> 
</form> 

ありがとう!

+3

変更 'contentType'に' false'を、似ます。http:// stackoverflowのを

$.ajax({ url:getFileSubmitUrl(), data:data, cache:false, processData:false, contentType:false, type:'POST', success:function (data, status, req) { handleResults(req); }, error:function (req, status, error) { handleResults(req); } }); 

は、私はまた、このコードでも働いたことがわかった。ここで

は働いAJAX呼び出しです。 com/questions/12831680/jquery-ajax-multipart-form-data-not-sending-data – Musa

答えて

21

Musaの反応は素晴らしい。 contentTypeをfalseに設定すると、フォームデータが正しく送信されました。ありがとう!

var oReq = new XMLHttpRequest(); 
     oReq.open("POST", getFileSubmitUrl()); 
     oReq.addEventListener("error", transferComplete); 
     oReq.addEventListener("load", transferComplete); 
     oReq.addEventListener("abort", transferComplete); 
     oReq.send(data); 
    } 
    function transferComplete(evt) { 
     handleResults(evt.target); 
    } 
+1

なぜオープン/送信後にイベントリスナーを追加しますか? –

関連する問題