html5 & upload files
https://www.sitepoint.com/html5-ajax-file-upload/
https://www.webcodegeeks.com/html5/html5-file-upload-example
<input type="file" id="fileinput" />
document.getElementById('fileinput').addEventListener('change', function(){
var file = this.files[0];
// This code is only for demo ...
console.log("name : " + file.name);
console.log("size : " + file.size);
console.log("type : " + file.type);
console.log("date : " + file.lastModified);
}, false);
multi files
<input type="file" id="fileinput" multiple="multiple" />
document.getElementById('fileinput').addEventListener('change', function(){
for(var i = 0; i<this.files.length; i++){
var file = this.files[i];
// This code is only for demo ...
console.group("File "+i);
console.log("name : " + file.name);
console.log("size : " + file.size);
console.log("type : " + file.type);
console.log("date : " + file.lastModified);
console.groupEnd();
}
}, false);
image
<input type="file" id="fileinput" multiple="multiple" accept="image/*" />
// Previewing Files
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Preview images</title>
<style>
#gallery .thumbnail{
150px;
height: 150px;
float:left;
margin:2px;
}
#gallery .thumbnail img{
150px;
height: 150px;
}
</style>
</head>
<body>
<h2>Upload images ...</h2>
<input type="file" id="fileinput" multiple="multiple" accept="image/*" />
<div id="gallery"></div>
<script src="gallery.js"></script>
</body>
</html>
var uploadfiles = document.querySelector('#fileinput');
uploadfiles.addEventListener('change', function () {
var files = this.files;
for(var i=0; i<files.length; i++){
previewImage(this.files[i]);
}
}, false);
function previewImage(file) {
var galleryId = "gallery";
var gallery = document.getElementById(galleryId);
var imageType = /image.*/;
if (!file.type.match(imageType)) {
throw "File Type must be an image";
}
var thumb = document.createElement("div");
thumb.classList.add('thumbnail'); // Add the class thumbnail to the created div
var img = document.createElement("img");
img.file = file;
thumb.appendChild(img);
gallery.appendChild(thumb);
// Using FileReader to display the image content
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
function uploadFile(file){
var url = 'server/index.php';
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Every thing ok, file uploaded
console.log(xhr.responseText); // handle response.
}
};
fd.append("upload_file", file);
xhr.send(fd);
}
var uploadfiles = document.querySelector('#uploadfiles');
uploadfiles.addEventListener('change', function () {
var files = this.files;
for(var i=0; i<files.length; i++){
uploadFile(this.files[i]); // call the function to upload the file
}
}, false);
FileAPI
https://w3c.github.io/FileAPI/
https://developer.mozilla.org/en-US/docs/Web/API/File
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！