显示出一个表单提交进度的进度条 [英] Displaying a progress bar showing the progress of a form submission
问题描述
这个问题并没有完全得到回答，请下跌自由做出贡献！
我想展示一个简单的进度条而大型表单提交。
表单包含字段的打，再加上一些文件上传域，其中，用户可以选择一个图象。然后，当他点击了创建按钮，数据和图片的形式提交，并在数据库中创建的实体。 （只点击提交表单和图片）。
一切工作正常，但我想，以显示在提交过程中的进度条。
我发现的很多的教程，说明如何显示进度条，但我并没有发现任何人解释如何显示指示工作的一个方法，也就是说，我希望看到10％，25％，等等。在提交过程。
所以，基本上，这是我做了什么：（这是一个ASP.NET MVC3项目）
I'm trying to display a simple progress bar while a large form is submitted.
The form contains a dozen of fields, plus some file upload fields, where the user can select a picture. Then, when he clicks on a Create button, the form with data and pictures are submitted and the entity is created in DB. (only one click to submit the form AND the pictures).
Everything works fine, but I'd like to display a progress bar during the submit process.
I have found a lot of tutorials explaining how to display a progress bar, but I don't find anyone explaining how to display a progress bar indicating the percentage of work accomplished by a method, ie, I'd like to see 10%, 25%, etc... during the submit process.
So, basically, this is what I've done : (this is an ASP.NET MVC3 project)
@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;
}
是否有可能改变我最后＆LT; DIV＆GT; 在进度显示的上传进度的状态呢？
Is it possible to transform my last <div> in a progressBar displaying the state of upload progress ?
这里是我的要求：
Here are my requirements :
- 无插件（这是一个的personnal项目，我想了解如何通过自己做到这一点）。
- 十字兼容IE8 +（如果可能）
- 的jQuery ok了，但没有闪光灯。
非常感谢你 ！
更新1
这里是一个的jsfiddle ，在这里我想适应的此链接但都没有成功。如果你认为你能有所帮助，欢迎您！
更新2
好吧，我用<一个href=\"http://stackoverflow.com/questions/21902385/displaying-a-progress-bar-showing-the-progress-of-a-form-submission/22125382?noredirect=1#22125382\">acarlon's回答提交我的 XMLHtt prequest 表格及的数据都是correcty发布到控制器。但是，进度仍然没有出现！结果
我只是取代传递给控制器的数据：
Thank you very much !
UPDATE 1
Here is a JSFIDDLE, where I'm trying to adapt this link but without success... If you think you can help, you're welcome !
UPDATE 2
Ok, I used acarlon's answer to submit my form with XMLHttpRequest and the datas are correcty posted to the controller. However, the ProgressBar still doesn't appear !
I just replace the data passed to the controller by :
formData = new FormData(document.getElementById("target-form") );
xhr.open("POST", "@Url.Action("MyMethod", "MyController")", true );
和尝试一些不同的页眉，如：
and try some different headers, like :
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.
（这是很难codeD在这里，以确保它具有良好的价值观。我会做在一个循环的时候我会更安心吧。）
(It was hardcoded here to be sure it has good values. I'll do it in a loop when I'll be more at ease with it.)
而当我提交表单，在 XMLHtt prequest 发送有以下字段：
And when I submit my form, the XMLHttpRequest send has these fields :
readyState的：4结果
状态：0℃=应为200，右
readyState: 4
status: 0 <= should be 200, right ?
而在错误处理程序，我有这些值：
加载：0结果
总计：883526结果
类型：错误
loaded: 0
total: 883526
type: "error"
所以，该数据被提交给我的控制器，但我无法显示这该死的进度...
So the data are submitted to my controller, but I'm unable to display this damned progressbar...
推荐答案
您可以使用 XMLHtt prequest 上传文件时接收更新。此外，还有各种的jQuery型包装器来实现相同的。我将通过描述一个解决方案 XMLHtt prequest 。
首先拦截的形式提交。
You can use XMLHttpRequest to receive updates when uploading files. There are also various jquery-type wrappers to achieve the same. I will describe a solution using XMLHttpRequest.
First intercept the form submit.
$("#target-form").submit(function () {
然后创建XHR请求：
Then create XHR request:
xhr = new XMLHttpRequest();
然后注册被通知有关进度事件：
Then register to be notified about progress events:
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 );
在任何参数传递（ ID 显示为例）
Open XHR passing in any arguments (id is shown as an example)
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 )
{
...
}
您会收到更新的更新处理。
You will receive the updates in the update handler.
扩展为长时间运行的服务器任务
如果没有在服务器上的一些长期运行的任务（如将数据写入到数据库中），那么你需要大块的操作（这样你可以给每个块完成更新）服务器上，实现code到处理长时间运行的服务，您可以通过从JavaScript查询。请参见
If there is some long running task on the server (such as writing the data to the database), then you need to chunk the operations (so that you can give updates on completion of each chunk) on the server and implement code to handle a long running service that you can query from javascript. See here. The basic idea is to start the task on the server side and periodically check the progress from Javascript. You may want to have two separate progress bars, one for uploading and one for the server side operation. This provides more information to the user - they will know that the file upload is complete and now some server-side operation is happening.
这篇关于显示出一个表单提交进度的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
