upload image using form created by ajax in java

Question

hello stackoverflow team, i am using a button with onclick function on it which make call to an ajax and that ajax populate a form in a div under that button. In the form there are various text fields and one input type=file now i want to upload this file using ajax and side by side upload the data into data base. I can upload the data to the database using ajax, but i am unable to upload the file using ajax. Here is my js code

var selectedCategory = $("#category option:selected").val();
    var prod_name = $("#prod_name").val();
    var prod_code = $("#prod_code").val();
    var price = $("#price").val();
    var age = $("#age").val();
    var description = $("#description").val();
    var img_path = $("#image_path").val();
    var formValues = "&selectedCategory="+selectedCategory+
                    "&prod_name="+prod_name+
                    "&prod_code="+prod_code+
                    "&price="+price+
                    "&age="+age+
                    "&description="+description+
                    "&image_path="+img_path;
    alert(formValues);
    uploadData(formValues);
    $.ajax({
        url: "UploadFile",
        type: 'POST',
        data: img_path,
        success: function (data)
        {
            $("#panel_body").html(data);
            //showProducts();
        }
    });
}

Here is my form that is created using ajax call to my servlet:

<table cellpadding="5" cellspacing="5" style="margin: 0 auto;" id="add_record_table">
<form action="UploadImage" method="post" enctype="multipart/form-data"></form>
    <tbody><tr>
        <td><label>Select Category</label></td>
        <td>
           <select name="category" id="category"><option id="0" value="-1">--Select category--</option><option id="1" value="Alphabets and Numbers">Alphabets and Numbers</option></select>
        </td>
    </tr>
    <tr>
        <td>
            <label>Product Name</label>
        </td>
        <td>
            <input type="text" name="prod_name" id="prod_name" placeholder="Product Name">
        </td>
    </tr>
    <tr>
        <td>
            <label>Product Code</label>
        </td>
        <td>
            <input type="text" name="prod-code" id="prod_code" placeholder="Produce Code">
        </td>
    </tr>
    <tr>
        <td>
            <label>Price</label>
        </td>
        <td>
            <input type="text" name="price" id="price" placeholder="Price">
        </td>
    </tr>
    <tr>
        <td>
            <label>Recomended Age</label>
        </td>
        <td>
            <input type="text" name="age" id="age" placeholder="Recomended Age">
        </td>
    </tr>
    <tr>
        <td>
            <label>Description</label>
        </td>
        <td>
            <textarea id="description" rows="5" cols="50" placeholder="Description" style="resize: vertical; max-height: 250px;"></textarea>
        </td>
    </tr>
    <tr>
        <td>
            <label>Upload Image</label>
        </td>
        <td>
            <input type="file" name="image_path" id="image_path" accept="image/jpeg">
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <input type="submit" name="submit" onclick="validateForm();" class="btn btn-primary btn-large" value="ADD" id="add_data">
        </td>
    </tr>

</tbody></table>

Please assist me to get through this problem.

score 0 · Answer 1 · answered Oct 22 '15 at 20:36

0

you can upload your files via ajax here is the example

var fileInput = document.getElementById('image_path');

            var file = fileInput.files[0];
            var formData = new FormData();
            formData.append('comprobante', file);

.... and all more data like:

            formData.append('age', age);

     ...data...

$.ajax({

                data: formData,
                url: 'UploadFile',
                type: 'post',
                processData: false,
                contentType: false,
                success:function (data)
    {
        $("#panel_body").html(data);
        //showProducts();
    }
});

Then you should handle the file uploaded in the backend.

answered Oct 22 '15 at 20:36

aeromeme

66
1
7

thank you for the reply, i will try and revert soon about the result. But still i want to ask something that do we need to set character encoding of the servlet something other than utf-8 and so. if yes what encoding we need to set – MN Mohal Oct 23 '15 at 18:33
hi i have just now tried to perform your example but it gives error Cannot `read property '0' of undefined` in the line `var file = fileInput.files[0];` – MN Mohal Oct 23 '15 at 18:41
Hi you must replace the id of your file input for 'comprobante'=> formData.append('your-file-id', file); – aeromeme Nov 03 '15 at 17:40

upload image using form created by ajax in java

1 Answers1