Comment: Below we use the new feature file API of Html 5 to upload files and display the percentage of upload files progress. The intention is like this: when a file is selected, the current file information is displayed.
Here we combine Asp.net MVC as the server, and you can also use other server languages. Let's look at the HTML of this snippet:@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" ,}))
{
<div>
<label for="file">
Upload Image:</label>
<input type="file" multiple="multiple" onchange="fileSelected();" />
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<input type="button" value="Upload Image" />
</div>
<div>
</div>
}
The related Javascript 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 cancelled by the user or the browser dropped the connection.");
}
The above is the native Javascript, which executes the fileSelected function in the onchange event, and executes the uploadFile function in the click button. Here, use XMLHttpRequest to implement ajax upload file. Note that the code can work in Firefox 14. IE 9 currently does not support file API, so you can participate here. The server-side code is very simple:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
/// <summary>
/// Uploads the specified files.
/// </summary>
/// <param>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