Ajax Web API文件上传带进度条

Question

我正在尝试使用这段代码将文件上传到服务器，

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!");
    }
}
}

在 Web Api 控制器中，

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

文件上传完美，我的问题是如何显示进度条，我正在使用jquery mobile进行设计。

我该如何显示百分比或其他东西的进度条？

- Dani

---

http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ - Andy

Answer 1

你尝试过 blueimp's jQuery File Upload 吗？我在我的一些项目中使用过它，它提供了一个进度条以及其他许多你喜欢的文件上传功能。

基本版本（以及所有其他版本）都有文件上传的进度条。你可以查看一个 演示。

这个插件还允许你通过暴露fileuploadprogress函数来修改进度条和相关信息 - 阅读文档。

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

这个插件使用Bootstrap进度条组件来显示进度条。

更好的是，它提供了与ASP.NET的文档化集成，并且还有一个GitHub项目，介绍如何在ASP.NET MVC中使用此插件。

希望这能帮到你。

- Yasser Shaikh