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

html5 & upload files的更多相关文章

  1. Upload Files To FTP in Oracle Forms D2k

    Upload Files To FTP in Oracle Forms D2k Use following procedure to upload files to Ftp.   PROCEDURE ...

  2. How To Use XDOLoader to Manage, Download and Upload Files? (文档 ID 469585.1)

    Applies to: BI Publisher (formerly XML Publisher) - Version 5.6.3 to 5.6.3 [Release 5] Information  ...

  3. How To Use XDOLoader to Manage, Download and Upload Files? (DOC ID 469585.1)

    In this Document Goal Fix     Downloading Files   Uploading Files References Applies to: BI Publishe ...

  4. HTTPWebrequest上传文件--Upload files with HTTPWebrequest (multipart/form-data)

    使用HTTPWebrequest上传文件遇到问题,可以参考Upload files with HTTPWebrequest (multipart/form-data)来解决 https://stack ...

  5. Upload Files In ASP.NET Core 1.0 (Form POST And JQuery Ajax)

    Uploading files is a common requirement in web applications. In ASP.NET Core 1.0 uploading files and ...

  6. AzCopy Upload Files

    We can use many ways upload our Files to Azure, Than I  Introduction to you a good way, AzCopy ! 1. ...

  7. Upload files to aliyunOSS with bootstrap-fileinput

    本文主要涉及两个概念: 阿里云OSS:对象存储(Object Storage Service,简称OSS),是阿里云对外提供的海量.安全和高可靠的云存储服务. bootstrap-fileinput: ...

  8. SharePoint自动化系列——Upload files to SharePoint library using PowerShell.

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 日常的SharePoint站点测试中,我们经常要做各种各样的数据,今天又写了几个脚本,发现自己写的 ...

  9. [Express] Upload Files with Express

    In this lesson we create a new Express web server app for handling file uploads and persisting them ...

随机推荐

  1. QGIS（2.18.15 源码）+Qt（5/5.9.3）+VS2015（X64）编译

    由于工作要求,今年需要基于Qt搞跨平台的GIS.前期未曾接触过Qt,最近也简单学习了下,开源的QGIS是非常不错的学习资源,下了最新版的QGIS源码,不过在VS2015下却没法直接打开.网上查了很多资 ...

  2. Block abstraction view（Create & Reference）

    在hierarchical design 中,一般需要调用 hard macro,top调用 macro 的方法有多种: 1. 调用macro对应的db 2. 调用 macro 的 ilm 模型(20 ...

  3. Python2.7-内置异常类型

    python内置了许多异常类型,他们的继承关系如下:-----------------------------------------------BaseException +-- SystemExi ...

  4. js基础知识入门总结

    1.第一个js程序 一个项目包括三部分:前端(html.css.js).数据库.后端技术 引入方式:页面中直接写,script标签引入 js事件绑定: <input type="but ...

  5. MyBatis在Oracle中插入数据并返回主键的问题解决

    引言:  在MyBatis中,希望在Oracle中插入数据之时,同一时候返回主键值,而非插入的条数... 环境:MyBatis 3.2 , Oracle. Spring 3.2   SQL Snipp ...

  6. Docker：一个装应用的容器

    一:简介:你是否经历过“我本地运行没问题啊!““哪个哥们有写死循环了““完了,服务器撑不住了“等等问题,docker就是这么帮你解决问题的工具,它可以帮你把web应用自动化打包和发布,在服务型环境下进 ...

  7. Android Studio com.android.support:percent 导入错误 - 转

    看第一行代码(第二版的)书,讲了一个关于PercentFrameLayout和PercentRelativeLayout的部分,书上在build.gradle中导入了com.android.suppo ...

  8. POJ 1068&&2632&&1573&&2993&&2996

    这次的题目是著名的模拟(水逼)专题 题目难度都不大,思维也不深,就是一个字——烦 同时很多题目都有很多坑点 1608 题意是告诉你一个只有()的字符串(且匹配正确),每个)的左边有几个(,让你求每一对 ...

  9. 使用nginx很卡之strace命令

    一.strace命令常用参数 strace -tt -T -v -f -e trace= -p -tt 在每行输出的前面,显示毫秒级别的时间 -T 显示每次系统调用所花费的时间 -v 对于某些相关调用 ...

  10. 《深入浅出NodeJS》mindmap

    接触NodeJS有快两年了,但因为和我的工作内容关系不大,所以一直没有系统的学习.最近终于有空能系统地了解学习一下这门技术,于是买了一本朴灵老师的<深入浅出NodeJS>仔细研读.这本书内 ...