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. oninput和onpropertychange实时监听输入框值的变化

    oninput和onpropertychange实时监听输入框值的变化 传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydow ...

  2. jqgrid 获取选中行主键集合

    如何获取选中行的主键集合呢? 使用  getGridParam(selarrrow) 方法可获取所有选中行的主键集合. 注意:此处的主键集合是指-设置为主键的列(key: true).再次提醒:一个j ...

  3. opencv---JPEG图像质量检测代码

    参考:http://blog.csdn.net/trent1985/article/details/50904173 根据国外一篇大牛的文章:No-Reference Perceptual Quali ...

  4. Hadoop Version History and Feature

    Versions and Features Hadoop has seen significant interest over the past few years. This has led to ...

  5. Android“寄生兽”漏洞技术分析

    一.关于app的缓存代码 安卓的应用程序apk文件是zip压缩格式的文件,apk文件中包含的classes.dex文件相当于app的可执行文件,当app运行后系统会对classes.dex进行优化,生 ...

  6. 20155202 张旭《网络对抗》Exp2 后门原理与实践

    20155202 张旭<网络对抗>Exp2 后门原理与实践 基础问题回答 例举你能想到的一个后门进入到你系统中的可能方式? 捆绑在软件中 注入在可执行文件里 注入在office文件的宏里面 ...

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

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

  8. MView的DDL查找：

    Select dbms_metadata.get_ddl('MATERIALIZED_VIEW','MVIEW_NAME') from dual:

  9. centos7 部署mysql-5.7.20

    一.系统环境 系统:CentOS Linux release 7.5 mysqlb进制包:mysql-5.7.20-linux-glibc2.12-x86_64.tar.gz 1)依赖包安装 yum ...

  10. leetcode刷题笔记172 阶乘后的零

    题目描述: 给定一个整数 n,返回 n! 结果尾数中零的数量. 示例1: 输入: 输出: 解释: ! = , 尾数中没有零. 示例2: 输入: 输出: 解释: ! = , 尾数中有 个零. 说明: 你 ...