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. Windows10 + eclipse + JDK1.8 + Apache Maven 3.6.0 + dl4j深度学习环境配置

    Windows10 + eclipse + JDK1.8 + Apache Maven 3.6.0 + dl4j深度学习环境配置 JDK下载安装请自行,并设置好环境变量1 查看Java版本C:\Use ...

  2. Underscore.js 入门-常用方法介绍

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  3. HDU 1203 I NEED A OFFER!（01背包+简单概率知识)

    I NEED A OFFER! Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Sub ...

  4. ceph存储osd启动异常处理和正常启停操作

    机器角色:cloudstack虚拟机的宿主机:ceph存储机器. 事件:ceph存储的物理机器由于内存异常,需要停机更换,仅仅是把该物理机上面的虚拟机迁移走,同时启动了停机维护,然后就直接关机.结果造 ...

  5. Java面试题，Java三大特性之一——多态的理解

    首先我们知道Java是一门面向对象的语言 面向对象三大特性,封装.继承.多态. 封装.继承.多态 ↓ 无论是学习路线,还是众人的口语习惯,都是按照这个这样进行排序,这是有原因的.因为封装好了才能继承, ...

  6. 大数据入门第二十天——scala入门（二）scala基础02

    一. 类.对象.继承.特质 1.类 Scala的类与Java.C++的类比起来更简洁 定义: package com.jiangbei //在Scala中,类并不用声明为public. //Scala ...

  7. 20155236范晨歌_Web安全基础实践

    20155236范晨歌_Web安全基础实践 目录 实践目标 WebGoat BurpSuite Injection Flaws Cross-Site Scripting (XSS) 总结 实践目标 ( ...

  8. 页面添加友盟（CNZZ）统计和事件追踪

    1. 在页面中引入友盟(CNZZ)统计的 JS 代码 <script type="text/javascript"> // 统计 var cnzz_protocol = ...

  9. SSIS 你真的了解事务吗？

    事务用于处理数据的一致性,事务的定义是,处于同一个事务中的操作是一个工作单元,要么全部执行成功,要么全部执行失败.把事务的概念应用到在实际的SSIS Package场景中,如何在Package中实现事 ...

  10. TensorFlow训练MNIST数据集（1） —— softmax 单层神经网络

    1.MNIST数据集简介 首先通过下面两行代码获取到TensorFlow内置的MNIST数据集: from tensorflow.examples.tutorials.mnist import inp ...