jQuery $.post sending image file to servlet

Question

I have javaee project. I want to send image file to my servlet via ajax. Ajax not sending image file to my java class. But it is sending textarea value. Here is my form

<form enctype="multipart/form-data" beanclass="ActionBean">
    <input type="file" id="uploadFile" name="newAttachment"/>
    <textarea name="name" id="name" rows="2" cols="30"></textarea>
    <s:submit value="Edit" name="saveOfferInfo" onclick="return edit(this);" />

JavaScript function:

function edit(button) {
    var form = button.form;
    var params = $(form).serializeArray();
    params.push({name: '_eventName', value: button.name});
    $.post(form.action, params, function (data) {
        alert("success");
});

If the answer helped you, please consider upvoting/accepting. Thanks. — ivan.sim, Aug 18 '15 at 14:37

score 0 · Answer 1 · edited May 23 '17 at 12:14

File upload is not possible using AJAX, check for further details

First of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the AJAX feeling. Even so it makes file upload process a bit nicer. In the next section I will present you a solution which imitates the AJAX process, but uses a normal upload process and iFrames.

The concept:

Create a simple HTML form for file upload
Set the target to an iFrame which is on the actual page but not visible
Call a JavaScript function on form submit to display the animation
After the PHP part finishes the upload process, then it hides the animation

If you don't bother about older browser versions and want to code for the latest browsers then you can use FileReader API See Using HTML5 file uploads with AJAX and jQuery

score 0 · Accepted Answer · answered Aug 18 '15 at 04:46

Looking at the doc of $.serializeArray(), it specifically says that

Data from file select elements is not serialized.

Unfortunately, uploading file in AJAX isn't as straight forward. There is a detailed tutorial here using straight-up JQuery. The gist of it is that you need to:

Bind the file input to a change event handler,
Gather all the form data in a FormData object,
Then POST the form data using the $.ajax function.

Too much work?

Alternately, if you don't mind including plugins in your codes, here are some options:

Or as Rohan pointed out, if you are using HTML5, you can explore the FileReader API.

jQuery $.post sending image file to servlet

2 Answers2