HTML5 get an example of uploading file information

Use Input[type=file] to upload files in Html4, but also in HTML5, but much richer than HTML4.

Such as:

<input type= "file" name= "AA" multiple= "multiple" id= "AA" value= ""/>

Added the Multiple property, plus you can upload multiple files at the same time.

<input type= "file" name= "AA" multiple= "multiple" id= "AA" value= ""/><input type= "button" Name= "btn" id= "BTN" Value= "123123"/><script type= "Text/javascript" > document. getElementById ("btn"). onclick =     function () { var file = document.getElementById ("AA"). files;  Console. log (file); </script>

You'll notice that there are so many things printed in the console:

Yes, this is the upload file information, so we can easily get to upload the file type and file name.

document.getElementById ("btn"). onclick = function () { var file = document.getElementById ("AA"). Files[0];  Console. log (file); Alert (' The type of file you upload is: ' +file.type+ ', filename is: ' +file.name ');}

Of course, the file size and the last modification time, we can use can be used.

The above I uploaded is a file, if it is more than one file is the case:

It will return as an array, so is it easy for us to handle it? For the loop, you can take care of it, this zero is not demonstrated.

HTML5 Upload File Example

The new feature of Html 5, the file API, implements uploading files and displays the percentage progress of uploaded files. The intent is this, when the file is selected, the current file information is displayed. Here we combine asp.net mvc as a server, and you can be other service-side languages. Let's look at the HTML of this fragment:

@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 this:

function fileselected () {
var file = document.getElementById (' filetoupload '). Files[0];
if (file) {
var fileSize = 0;
if (File.size > 1024 * 1024)
FileSize = (Math.Round (file.size * (1024 * 1024)). ToString () + ' MB ';
Else
FileSize = (Math.Round (file.size * 100/1024)/MB). 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 then the server send back a response * *
alert (Evt.target.responseText);
}

function uploadfailed (evt) {
Alert ("There was a error attempting to upload the file.");
}

function uploadcanceled (evt) {
Alert ("The upload has been canceled by the user or the browser dropped the connection.");
}

Above is the native JavaScript, performs the fileselected function in the onchange event, executes the UploadFile function in the click button, This uses XMLHttpRequest to implement Ajax upload files. Note that the code can work in Firefox 14, IE 9 does not currently support the file API, you can participate here. The server-side code is simple:

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");
}
}

Uploading multiple files with Html5 and asp.net mvc

HTML 5 has some of the file APIs, the form table Shankiang features, let us easily support multiple file upload, look at the following HTML fragment code:

<form action= "/home/upload" enctype= "Multipart/form-data" id= "Form2" method= "POST" >
<input type= "File" Name= "Filetoupload" id= "fileToUpload2" multiple= "multiple"/>
<input type= "Submit" value= "Submit"/>
</form>

That's what we can do in the ASP.net MVC Web application:

@using (Html.BeginForm ("Upload", "Home", FormMethod.Post, new {enctype = "multipart/form-data", id = "Form2"}))
{
<label for= "File" >upload image:</label>
<input type= "File" Name= "Filetoupload" id= "fileToUpload2" multiple= "multiple"/>
<input type= "Submit" value= "Upload Image by Submit"/>
}

Suppose this is a homecontroller view that is about to be submitted to the upload action, looking at the following server-side code:

[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");
}

Okay, that's simple. Here we store the received file in the App_Data folder and return to the index action