How can I upload files asynchronously

0 votes

I would like to upload a file asynchronously with jQuery.

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

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?

Sep 10, 2020 in JQuery by kartik
• 37,490 points
31 views

1 answer to this question.

0 votes

Hello @kartik,

Using JavaScript code you can do it like this:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

Hope it helps!!
Thank you!!

answered Sep 10, 2020 by Niroj
• 82,560 points

Related Questions In JQuery

0 votes
1 answer

How can I select an element with multiple classes in jQuery?

Hello @kartik, If you want to match only ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,560 points
101 views
0 votes
1 answer

How can I detect if a selector returns null?

Hello @kartik, My favourite is to extend jQuery ...READ MORE

answered Oct 4, 2020 in JQuery by Niroj
• 82,560 points
143 views
0 votes
1 answer

How can I determine the direction of a jQuery scroll event?

Hello @kartik, Check current scrollTop vs previous scrollTop var lastScrollTop = 0; $(window).scroll(function(event){ ...READ MORE

answered Nov 24, 2020 in JQuery by Niroj
• 82,560 points
47 views
0 votes
1 answer

How can I convert a DOM element to a jQuery element?

Hello, Use this: var elm = document.createElement("div"); var jelm = ...READ MORE

answered Nov 25, 2020 in JQuery by Niroj
• 82,560 points
65 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
5,561 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,560 points
642 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
491 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,560 points
6,142 views
0 votes
1 answer

How can I implement my own $(document).ready functionality without using jQuery?

Hello @kartik,  There are three options: If script is the last ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,560 points
283 views
0 votes
1 answer

How can I refresh a page with jQuery?

Hello @kartik, Use location.reload(): $('#something').click(function() { location.reload(); }); The reload() function ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,560 points
60 views