Home > Article > Web Front-end > Implementation code for displaying progress of HTML5 upload files_html5 tutorial skills
Implementation code for displaying progress of HTML5 upload files_html5 tutorial skills
- WBOYOriginal
- 2016-05-16 15:51:061508browse
Here we are combining Asp.net MVC as the server, you can also use other server languages. Let’s look at the HTML of this fragment:
Copy the code
The code is as follows:@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"}))
{
< ;div id="fileSize">
}
The related Javascript is like this:
Copy code
The code is as follows:function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 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('progressNumber').innerHTML = percentComplete.toString() '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target .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 function that executes fileSelected in the onchange event , after clicking the button, the uploadFile function is executed. Here, XMLHttpRequest is used to implement ajax uploading files. Note that the code will work in Firefox 14, IE 9 does not currently support the file api, you can participate here. The server-side code is very simple:
Copy the code
The code is as follows: public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
///
/// Uploads the specified files .
///
/// The files.
///
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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn