Upload operation of file asynchronously using jquery

Question

I want to upload files asynchronously using jQuery. This is my HTML:

<input type="file" id="f" name="f"/>
<input id="upload" type="button" value="Upload"/>

And here my JavaScript code:

$(document).ready(function () {
$("#upload").click(function () {
    var filename = $("#f").val();

    $.ajax({
        type: "POST",
        url: "addFile.do",
        enctype: 'multipart/form-data',
        data: {
            file: filename
        },
        success: function () {
            alert("All Files Have Been Uploaded ");
        }
    });
});
});

I am getting file names only instead of actual file which I have uploaded

I am using theThis Plugin to upload files.

Use the plugin like you currently are.

Barmar
– Barmar

2014-05-28 07:40:35 +00:00
Commented May 28, 2014 at 7:40 — Barmar
– Barmar, Commented May 28, 2014 at 7:40
stackoverflow.com/questions/2320069/jquery-ajax-file-upload

Kaiser
– Kaiser

2014-05-28 07:40:55 +00:00
Commented May 28, 2014 at 7:40 — Kaiser
– Kaiser, Commented May 28, 2014 at 7:40

Antti Haapala · Accepted Answer · 2014-05-28 08:09:46Z

1

Unlike you think, the code does NOT use that plugin to upload files. Instead you explicitly make an ajax request. The error occurs because the value of the <input type="file"> is the filename, and that is the only data you are sending in the request.

Instead you need to bind the form using $(form).ajaxform(); then in the click handler, you can trigger the submit event on the form.

Thus something like as follows ought to do the trick:

html:

<form method="post" action="addFile.do">
<input type="file" id="f" name="f"/>
<input id="upload" type="button" value="Upload"/>
</form>

And JavaScript:

$('form').ajaxform({
    success: function () {
        alert("All Files Have Been Uploaded ");
    }
});

$("#upload").click(function() {
    $('form').submit();
});

answered May 28, 2014 at 8:09

Antti Haapala

135k23 gold badges297 silver badges349 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload operation of file asynchronously using jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related