Geek asks and answers

Ajax web api Download progress bar file

I am trying to execute this code to upload a file to a 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 loaded perfectly, my question is how to show the progress bar, I use jquery mobile for design.

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

+3
source share
1 answer

Have you tried blueimp jQuery File Download ? I have used it in several of my projects, and it provides you with a progress bar, as well as many other functions that you would like to have when downloading a file.

( ) . .

enter image description here

, fileuploadprogress - 

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

.

, ASP.NET github project ASP.NET MVC.

, .

+1

More articles:


All Articles