The request was rejected because no multipart boundary was found

Question

I am using a Form in a LightBox which contains some input element.

<form name="imageUploadForm" action="uploadImage.do" method="post" enctype="multipart/form-data">
<input type="text"  id="id" name="id" style="display: none;" value="">
    <div id="fileUploaderDiv">
         <input type='file' name="file0" id ="file0"  />
    </div>
<input type="submit" value="Submit">
</form>

when i am submitting the form than the form redirect to it's action location. I just want to submit form without redirecting user, so user stay on lightbox without loosing his data.

I have tried jquery ajax call for this

var data = new FormData();
var $inputs = $('#imageUploadForm :input');
var values = {};
    $inputs.each(function() {
                values[this.name] = $(this).val();
                data.append(this.name, $(this).val());
            });
$.ajax({
                url: 'uploadImage.do',
                data: data,
                cache: false,
                contentType: 'multipart/form-data',
                processData: false,
                type: 'POST',
                success: function(data){
                   alert(data);
                }
            });

But getting error at server side in my FileUploader servlet.

The request was rejected because no multipart boundary was found

can anybody tell me what am i missing in this ?

Have the submit button trigger a JS event, gather the data and (like elclanrs says) ->AJAX — dgeare, Aug 04 '12 at 19:02
This question may help: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery — scott.korin, Aug 04 '12 at 19:23
My Servlet code is http://www.srikanthtechnologies.com/blog/java/fileupload.aspx — Ashish Panery, Aug 04 '12 at 19:27
http://stackoverflow.com/questions/15008049/org-springframework-web-multipart-multipartexception-the-current-request-is-not — Rudy, Sep 14 '16 at 17:16

adeneo · Answer 1 · 2012-08-04T19:30:10.317

You need to prevent the default action of submitting the form:

$('form[name="imageUploadForm"]').on('submit', function(e) {
     e.preventDefault();
     $.ajax({
            type: 'POST',
            url: 'uploadImage.do',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
               alert(data);
            }
     });
});

I believe you should set the contentType option to false when using the FormData class, forcing jQuery not to add a Content-Type header, otherwise the boundary string will be missing, and that's probably the reason for your server error.

You must also leave the processData flag set to false, otherwise, jQuery will try to convert your FormData into a string, which will fail.

I have tried your solution but google chrome throwing a Uncaught TypeError : Illegal Invocation. b_ f.extend.param f.extend.ajax (anonymous function) f.event.dispatch f.event.add.h.handle.i — Ashish Panery, Aug 04 '12 at 19:48

score 1 · Accepted Answer · edited Oct 19 '13 at 16:54

Here is the simplest form of a form submit using jquery Ajax. I have not tested this but it should work :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test form</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#sbmt').click(function(){
            var text1 = $('#text1').val();
            var text2 = $('#text2').val();
            /// validation of inputs
            ///then
            $.ajax(
            {
                url :'submit.php',
                type : 'post',
                        data :  {'text1' : text1, 'text2' : text2 },
                success: function(data){
                        alert("form submitted . response is :"+ data);
                    }
            }
            ).fail(function(){alert("Failed!!");});
            });
        });
    </script>
</head>
<body>
    <form id="myform">
        <input type="text" id="text1" />
        <input type="text" id="text2" />
        <input type="button" id="sbmt"  value="submit"/>
    </form>
</body>
</html>

By the way, it now looks like you want to pass a file with the form. That's more complex than that. Search for Valums Uploader in google. That's a good uploader if you need ajax file upload — Gogol, Aug 04 '12 at 19:16
Thanks man. I love stack exchange and have learned a lot from here. So i try to answer whatever i can, in return :) — Gogol, Aug 04 '12 at 19:21
@SugatoSengupta thanks i have tried your solutions in different way but got error at server side.i have edited my question. — Ashish Panery, Aug 04 '12 at 19:26

The request was rejected because no multipart boundary was found

2 Answers2

Linked