显示进度条，显示表单提交的进度

这个问题还没有完全解答，欢迎大家踊跃留言！

我正在尝试显示一个简单的progress bar提交大表格时。

该表单包含十几个字段，以及一些文件上传字段，用户可以在其中选择图片。然后，当他点击Create按钮，提交带有数据和图片的表单，并在数据库中创建实体。 （只需单击一下即可提交表格和图片）。
一切正常，但我想在提交过程中显示进度条。

我已经发现a lot很多教程解释了如何显示进度条，但我没有找到任何人解释如何显示进度条，指示方法完成的工作百分比，即，我希望在提交过程中看到 10%、25% 等。

所以，基本上，这就是我所做的：（这是一个 ASP.NET MVC3 项目）

@model MyModel

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "target-form", enctype = "multipart/form-data" }))
{
    //some Html.TextBoxFor() and other @Html.DropDownListFor

    @Html.TextBoxFor(m => m.File, new { type = "file"})

    <input type="submit" value="Create" class="submitButton" />

    <div id="progressBar"></div>
}

和一个基本控制器

[HttpPost]
public ActionResult Create(MyModel model)
{
    if (ModelState.IsValid)
    {
        DALLayer dal = new DALLayer()
        dal.AddEntity(model);

        return RedirectToAction("Index", "Home");
    }

    return null;
}

是否有可能改变我的最后<div> in a progressBar显示上传进度状态 ?

这是我的要求：

• 没有插件（这是一个个人项目，我想了解如何自己做到这一点）。
• 交叉兼容，IE8+（如果可能）
• jQuery 可以，但没有 Flash。

非常感谢 ！

UPDATE 1这里有一个JSFIDDLE，我正在努力适应的地方这个链接但没有成功...如果您认为您可以提供帮助，不客气！


UPDATE 2好的，我用过阿卡隆的回答提交我的表格XMLHttpRequest并且数据正确地发布到控制器。然而，进度条仍然没有出现！
我只是将传递给控制器​​的数据替换为：

formData = new FormData(document.getElementById("target-form") );
xhr.open("POST", "@Url.Action("MyMethod", "MyController")", true );

并尝试一些不同的标题，例如：

xhr.setRequestHeader("X-File-Name", $('#Files_0__File')[0].files[0].name);
xhr.setRequestHeader("X-File-Size", $('#Files_0__File')[0].files[0].size);
xhr.setRequestHeader("X-File-Type", $('#Files_0__File')[0].files[0].type);
//Also tried with "Content-Length" but it doesn't care about it.

（它在这里被硬编码，以确保它具有良好的值。当我更轻松地使用它时，我会循环执行它。）

当我提交表格时，XMLHttpRequest发送有这些字段：

就绪状态：4
status: 0

并且在error handler，我有这些价值观：

已加载：0
总计：883526
类型：“错误”

所以数据被提交到我的控制器，但我无法显示这个该死的进度条......

您可以使用XMLHttpRequest上传文件时接收更新。还有各种 jquery 类型的包装器可以实现相同的目的。我将使用描述一个解决方案XMLHttpRequest。 首先拦截表单提交。

$("#target-form").submit(function () {

然后创建XHR请求：

 xhr = new XMLHttpRequest();

然后注册以获得有关进度事件的通知：

xhr.upload.addEventListener( "progress", function ( evt )
{
    if( evt.lengthComputable )
    {
        var progressPercent = ( evt.loaded / evt.total ) * 100;
        showProgress( value );//your function.
    }
}, false );


//Some other events you will probably want to subscribe to
xhr.addEventListener( "load", function ()
{            
    fileUploadComplete( this.responseText );
}, false );

xhr.addEventListener( "error", function ( first, second, third )
{
    fileUploadComplete( "Error: Image format not supported." );
}, false );

xhr.addEventListener( "abort", function ()
{
    fileUploadComplete( "Error: Upload was cancelled. Please try again." );
}, false );

打开 XHR 传递任何参数 (id作为示例显示）

xhr.open( "post", '@Html.Raw( @Url.Action( "UploadImage", new { someId = id } ) )', true );

// Set appropriate headers                
xhr.setRequestHeader( "Content-Type", "multipart/form-data" );
xhr.setRequestHeader( "X-File-Name", name );

// Send the file
xhr.send( file );

然后在控制器中：

public ActionResult UploadImage( int someId, HttpPostedFileBase userFile  )
{
    ...    
}

您将在更新处理程序中收到更新。

长时间运行的服务器任务的扩展

如果服务器上有一些长时间运行的任务（例如将数据写入数据库），那么您需要对服务器上的操作进行分块（以便您可以在完成每个块时提供更新）并实现代码来处理您可以从 javascript 查询长期运行的服务。看here。基本思想是在服务器端启动任务并定期检查 Javascript 的进度。您可能需要两个单独的进度条，一个用于上传，一个用于服务器端操作。这为用户提供了更多信息 - 他们将知道文件上传已完成并且现在正在发生一些服务器端操作。