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. C++之语言概述

    C++语言是广泛使用的程序设计语言之一,因其特有的优势在计算机应用领域占有重要一席. C语言的发展 20世纪70年代初,贝尔实验室的Dennis Richie 等人在B语言基础上开发出C语言,最初是作 ...

  2. HTTP请求header信息讲解

    HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息.这两种类型的消息由一个起始行,一个或者多个头域,一个只是头域结束的空行和可选的消息体组成.HTTP的头域包括通用头,请求头,响应头和 ...

  3. Oracle substr() instr() 用法

    转载:oracle中substr() instr() 用法 substr(字符串,截取开始位置,截取长度) = 返回截取的字符串instr(源字符串,目标字符串,起始字符串,匹配字符串) = 返回要截 ...

  4. Transaction Check Error:file /usr/libexec/getconf/default conflicts between attempted installs of gcc-6.4.1-1.fc25.i686 and gcc-6.4.1-1.fc25.x86_64

    今天在我的ubuntu系统上使用yum来安装软件时出错了错误:Transaction Check Error:file /usr/libexec/getconf/default conflicts b ...

  5. 【stylus】stylus在webstrom中的识别

    <style lang="stylus" rel="stylesheet/stylus"> @import './common/stylus/mix ...

  6. 20155207 实验5 MSF基础应用

    20155207 实验5 MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode exploit:让攻击方式能够发挥作用的通道,更像是没有子弹的枪,提供了攻击方 ...

  7. 20155229《网络对抗技术》Exp6：信息收集与漏洞扫描

    实验内容 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点 (4)漏洞扫描:会扫,会看报告,会查漏洞说明,会修补 ...

  8. 20155306 白皎 《网络攻防》 EXP8 Web基础

    20155306 白皎 <网络攻防> EXP8 Web基础 一.问题回答 - 什么是表单 表单:一般用来收集用户的信息和反馈意见 表单包括两个部分:一部分是HTML源代码用于描述表单(例如 ...

  9. 11.10 （上午）开课二个月零六天（ajax基础，ajax做登录）

    test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  10. 51nod 小朋友的笑话

    链接 分析: 每次操作把以前没有出现这个数的设为1,有这个数的设为0.首先将当前区间设为1,考虑有set维护这个颜色出现的区间,然后把所有与当前区间相交的拿出来,修改为0. 复杂度?每次操作的线段只会 ...