How to upload files to database along with other form attributes using jquery and servlets

Question

<div class="modal fade" id="myModal4" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 40%;">
            <!-- Modal content-->
            <div class="modal-content">
                <!-- Modal Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel4">Tender Documents</h4>
                </div>
                <!-- Modal Body-->
                <div class="modal-body">
                    <div class="panel-body">

                        <form id="fileinfo" name="fileinfo"  method="post">

                            <div>
                                <label>Upload File</label><br /> <input type="file" name="file"
                                    size="50" id="file">
                            </div>

                            <div class="form-group">
                                <label>Document Serial No</label><br /> <input type="text"
                                    name="serialNo" id="dSerialNo" class="form-control input-sm"
                                    placeholder="Serial No" required="required">
                            </div>
                            <div class="form-group">
                                <label>Attach Name</label><br /> <input type="text"
                                    name="attachName" id="dAttachName"
                                    class="form-control input-sm" placeholder="Attach Name"
                                    required="required">
                            </div>
                            <div class="form-group">
                                <label>Description</label> <input type="text" id="dDesc"
                                    name="dDescription" />
                            </div>

                            <!-- Modal Footer -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-info" data-dismiss="modal" id="uploaddocument">Submit</button>
                                <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- Modal Body-->

            </div>
            <!-- Modal content-->
        </div>
    </div>
    <!-- Modal 4-->

The above code snippet is my Form which contains a form , which is used for uploading file and it also contains few attributes.

$(document).on('click','#uploaddocument', function(){
        alert("uploaddocument");
        var fd = new FormData(document.getElementById("fileinfo"));
        fd.append("label", "WEBUPLOAD");
        var file=$('#file');
        console.log(file);
        var id=$('.selected').attr('id');
        alert(id);
        var obj={};
        obj.id=id;
        obj.file=$('#file').val();
        obj.serialNo=($('#dSerialNo').val()).toString();
        obj.attachName=$('#dAttachName').val();
        obj.udescription=$('#dDesc').val();

        $.ajax({
            url: '/OtherApplication/upload.do?id='+id,
            type: 'POST',
            dataType: 'json',
            enctype: 'multipart/form-data',
            processData: false,  
            contentType: false ,  
            data: JSON.stringify(obj),
            success: function( data, textStatus, jqXHR) {
                alert("Success");
                console.log(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                console.log("Something really bad happened " + textStatus);
            }
        });

    });

The above code snippet is my jquery-ajax call how to send all my form's data to servlet so that I can access all file contents as well as my other attributes related to form.In servlet I am not able to access my file contents also other form attributes which needs to be uploaded to database.Please provide me the solution . Thanks in advance.

Answer 1

First you need to add enctype="multipart/form-data" in your form tag as attribute.

Hope that will help as you have added in same in ajax call but it will take only if it form have.

normally i am using ajaxSubmit API to handle Form Data to servlet or webservice which will give you all objects which are listed in form on save or update.

Good Luck

Please don't forgot to use

 <form id="data" method="post" enctype="multipart/form-data">.