Implementation Code of HTML5 File Upload progress display

Comments: The new file api of Html 5 is used to upload files and display the progress percentage of uploaded files. This is the intention. When selecting a file, the current file information is displayed. Here we use Asp.net MVC as the server. You can also use other server languages. Let's look at the HTML of this part:

The Code is as follows:
@ Using (Html. BeginForm ("Upload", "Home", FormMethod. Post, new {enctype = "multipart/form-data", id = "form1 "}))
{
<Div class = "row">
<Label for = "file">
Upload Image: </label>
<Input type = "file" name = "fileToUpload" id = "fileToUpload" multiple = "multiple" onchange = "fileSelected ();"/>
</Div>
<Div id = "fileName">
</Div>
<Div id = "fileSize">
</Div>
<Div id = "fileType">
</Div>
<Div class = "row">
<Input type = "button" onclick = "uploadFile ()" value = "Upload Image"/>
</Div>
<Div id = "progressNumber">
</Div>
}

The related Javascript is as follows:

The Code is as follows:
Function fileSelected (){
Var file = document. getElementById ('filetoupload'). files [0];
If (file ){
Var fileSize = 0;
If (file. size & gt; 1024*1024)
FileSize = (Math. round (file. size * 100/(1024*1024)/100). toString () + 'mb ';
Else
FileSize = (Math. round (file. size * 100/1024)/100). toString () + 'kb ';
Document. getElementById ('filename'). innerHTML = 'name: '+ file. Name;
Document. getElementById ('filesize'). innerHTML = 'size: '+ fileSize;
Document. getElementById ('filetype'). innerHTML = 'Type: '+ file. Type;
}
}
Function uploadFile (){
Var fd = new FormData ();
Fd. append ("fileToUpload", document. getElementById ('filetoupload'). files [0]);
Var xhr = new XMLHttpRequest ();
Xhr. upload. addEventListener ("progress", uploadProgress, false );
Xhr. addEventListener ("load", uploadComplete, false );
Xhr. addEventListener ("error", uploadFailed, false );
Xhr. addEventListener ("abort", uploadCanceled, false );
Xhr. open ("POST", "Home/Upload ");
Xhr. send (fd );
}
Function uploadProgress (evt ){
If (evt. lengthComputable ){
Var percentComplete = Math. round (evt. loaded * 100/evt. total );
Document. getElementById ('ssssnumber'). innerHTML = percentComplete. toString () + '% ';
}
Else {
Document. getElementById ('ssssnumber'). innerHTML = 'unable to compute ';
}
}
Function uploadComplete (evt ){
/* This event is raised when the server sends back a response */
Alert(evt.tar get. responseText );
}
Function uploadFailed (evt ){
Alert ("There was an error attempting to upload the file .");
}
Function uploadCanceled (evt ){
Alert ("The upload has been canceled by the user or the browser dropped the connection .");
}

The above is the native Javascript. In the onchange event, the fileSelected function is executed, and the uploadFile function is executed by clicking the button. Here, the XMLHttpRequest is used to upload files through ajax. Note that the code can work in Firefox 14, and IE 9 currently does not support file APIs. You can join here. The server code is simple:

The Code is as follows:
Public class HomeController: Controller
{
Public ActionResult Index ()
{
Return View ();
}
/// <Summary>
/// Uploads the specified files.
/// </Summary>
/// <Param name = "fileToUpload"> The files. </param>
/// <Returns> ActionResult </returns>
[HttpPost]
Public ActionResult Upload (HttpPostedFileBase [] fileToUpload)
{
Foreach (HttpPostedFileBase file in fileToUpload)
{
String path = System. IO. Path. Combine (Server. MapPath ("~ /App_Data "), System. IO. Path. GetFileName (file. FileName ));
File. SaveAs (path );
}
ViewBag. Message = "File (s) uploaded successfully ";
Return RedirectToAction ("Index ");
}
}

Author: Petter Liu