upload-script-api.php
Quell Code
<!DOCTYPE html>
<html>
<head>
<title>File API</title>
<style>
body{
font-family: 'Segoe UI';
font-size: 12pt;
}
header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;
}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}
#result ul{
list-style: none;
margin-top:20px;
}
#result ul li
{
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
<h1>File API</h1>
</header>
<article>
<label for="files">Select multiple files: </label>
<input id="files" type="file" multiple/>
<output id="result" />
</article>
<script>
window.onload = function(){
//Check File API support
if(window.File && window.FileList)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //It returns a FileList object
var filesInfo = "";
for(var i = 0; i< files.length; i++)
{
var file = files[i];
filesInfo += "<li>Name: " + file.name + "</br>" +
" Size: " + file.size + " bytes</br>" +
" Type: " + file.type + "</br>" +
" Modified Date: " + file.lastModifiedDate + "</li>";
}
var output = document.getElementById("result");
output.innerHTML = "<ul>" + filesInfo + "</ul>";
});
}
else
{
console.log("Your browser does not support File API");
}
}
</script>
</body>
</html>