Ajax web api File Upload With Progress bar

Question

I'm trying out this code to upload file to the server,

Html:

<input type="file" id="file1" name="browsefile" multiple="multiple"  accept="video/mp4,video/*">

JavaScript:

function FileUpload(SomestringParameter) {
    var files = $("#file1").get(0).files;
    if (files.length > 0) {
        if (window.FormData !== undefined) {
            var data = new FormData();
            for (i = 0; i < files.length; i++) {
                data.append("file" + i, files[i]);
        }
        $.ajax({
            type: "POST",
            url: "http://localhost:50443/UploadFile/" + SomestringParameter,
            contentType: false,
            processData: false,
            data: data,
            success: function (results) {
                alert(results);
                for (i = 0; i < results.length; i++) {
                    alert(results[i]);
                }
            }
        });

    } 
    else {
        alert("This browser doesn't support HTML5 multiple file uploads!");
    }
}
}

In Web Api Controller,

[HttpPost]
[ActionName("UploadFile")]
public HttpResponseMessage UploadFile([FromRoute]string SomeStringData)
{
    // Save the uploaded file here on the server
}

The File is uploaded perfectly, My question is how to show progress bar, I'm using jquery mobile for designing.

How could I show a progress bar with percentage or something?

dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5

Andy
– Andy

2014-02-06 13:28:43 +00:00
Commented Feb 6, 2014 at 13:28 — Andy
– Andy, Commented Feb 6, 2014 at 13:28

Yasser Shaikh · Accepted Answer · 2014-04-14 11:53:23Z

Have you tried blueimp's jQuery File Upload ? I have used it in few of my projects and it does provide you a progress bar along with a host of other features that you would love to have in a file upload.

The basic version (and all other version too) has a progress bar for file upload. You can check out a demo.

enter image description here

This plugin also allows you to modify the progress bar and related information by exposing the fileuploadprogress function - Read Documentation

$('#fileupload').bind('fileuploadprogress', function (e, data) {
    // Log the current bitrate for this upload:
    console.log(data.bitrate);
});

This plugin uses Bootstrap's progress bar component to display its progress bar.

What's better is that it provides a documented integration with ASP.NET and there's a github project for how to use this plugin with ASP.NET MVC too.

Hope this helps you.

Collectives™ on Stack Overflow

Ajax web api File Upload With Progress bar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related