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 ?

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 ?

• java
• javascript
• jakarta-ee
• jquery

• Have the submit button trigger a JS event, gather the data and (like elclanrs says) ->AJAX – dgeare Commented Aug 4, 2012 at 19:02
• This question may help: stackoverflow./questions/166221/… – scott.korin Commented Aug 4, 2012 at 19:23
• My Servlet code is srikanthtechnologies./blog/java/fileupload.aspx – Ashish Panery Commented Aug 4, 2012 at 19:27
• stackoverflow./questions/15008049/… – Rudy Commented Sep 14, 2016 at 17:16

2 Answers 2

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.

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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test form</title>
    <script src="http://code.jquery./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>