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. pyspider中内容选择器常用方法汇总

    pyspider 的内容选择器默认已经实例化一个pyquery对象,可以直接使用pyquery的api来获取自己需要的内容. 1.在pyquery中使用response.doc就可以直接实例化一个py ...

  2. 本地模拟服务器CDN(静态HTML，CSS，JS)开发

    本地模拟服务器CDN(静态HTML,CSS,JS)开发 所谓本地开发环境就是和线上cdn(a.longencdn.cn)一样的目录结构和功能,提供了一个本地镜像,开发者直接在本地镜像的对应目录中作开发 ...

  3. POJ 1904 King's Quest(SCC的巧妙应用，思维题！！！，经典题）

    King's Quest Time Limit: 15000MS   Memory Limit: 65536K Total Submissions: 10305   Accepted: 3798 Ca ...

  4. SNAT和DNAT

    1.SNAT iptables防火墙 Centos6.6 64位 iptables 内网:eth0 172.16.4.1 外网:eth 112.112.112.112/24 当有用户访问公网时,修改用 ...

  5. mysqldump: Got error: 1356 mysqldump的重要参数--force

    一个MySQL的备份突然变小了很多,但实际的数据量却一直在增长.备份脚本也没有调整过.为什么呢? 重现了一下备份过程,发现备份中遇到了如下错误: mysqldump: Got error: 1356: ...

  6. 学习C#(一)

    赶紧好好学学自己的C#,,要不然要给做的东西说拜拜了,,,时间紧迫,,,真担心会食言..................... 在C#中以为只要类有构造方法,,,,原来结构也有 using Syste ...

  7. gcc 动态编译 动态库路径

    gcc 动态编译(共享库) 动态编译的可执行文件需要附带一个的动态链接库,在执行时,需要调用其对应动态链接库中的命令优点:体积小,编译快缺点:依赖性高 代码如下: [root@74-82-173-21 ...

  8. linux中原子操作实现方式

    原子操作提供了指令原子执行,中间没有中断.就像原子被认为是不可分割颗粒一样,原子操作(atomic operation)是不可分割的操作. 如下面简单的例子: Thread 1             ...

  9. Mike的农场 BZOJ4177

    分析: 最小割,不选则割的建模题...(然而一开始我当成了费用流,简直丧心病狂...最后想到了最小割...) 对于条件一,直接建一条双向边就可以了,并且不计入sum中,因为这是作为费用的存在,让它跑出 ...

  10. 1.4《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——编辑命令

    在编辑模式中,命令行包括几个重复之前命令的功能.这些以及其他很多命令功能时常设计键盘上的特殊键,所以给出Table 1作为参考,给出了许多键在典型的Macintosh键盘上的标记符号.若你的键盘不太一 ...