xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

html5 & upload files

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{
            width:150px;
            height: 150px;
            float:left;
            margin:2px;
        }
        #gallery .thumbnail img{
            width: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 发布文章使用：只允许注册用户才可以访问！

posted @ 2019-03-01 14:53  xgqfrms  阅读(483)  评论(4)  编辑  收藏  举报