html5 & upload files
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的更多相关文章
- 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 ...
- 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 ...
- 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 ...
- HTTPWebrequest上传文件--Upload files with HTTPWebrequest (multipart/form-data)
使用HTTPWebrequest上传文件遇到问题,可以参考Upload files with HTTPWebrequest (multipart/form-data)来解决 https://stack ...
- 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 ...
- AzCopy Upload Files
We can use many ways upload our Files to Azure, Than I Introduction to you a good way, AzCopy ! 1. ...
- Upload files to aliyunOSS with bootstrap-fileinput
本文主要涉及两个概念: 阿里云OSS:对象存储(Object Storage Service,简称OSS),是阿里云对外提供的海量.安全和高可靠的云存储服务. bootstrap-fileinput: ...
- SharePoint自动化系列——Upload files to SharePoint library using PowerShell.
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 日常的SharePoint站点测试中,我们经常要做各种各样的数据,今天又写了几个脚本,发现自己写的 ...
- [Express] Upload Files with Express
In this lesson we create a new Express web server app for handling file uploads and persisting them ...
随机推荐
- VC++ MFC单文档应用程序SDI下调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错原因分析及解决办法:glewInit()初始化的错误
1.问题症状 在VC++环境下,利用MFC单文档应用程序SDI下开发OpenGL程序,当调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错,出错代码如下: OpenG ...
- php5.6.40编译安装
yum install gcc bison bison-devel zlib-devel libmcrypt-devel mcrypt mhash-devel openssl-devel libxml ...
- JAVA 框架 springmvc controller的返回值
一.返回值:ModleView对象. 使用modelAndView.setViewName设置返回的页面.使用modelAndView.addObject设置返回的数据. @RequestMappin ...
- 2018-2019-2 20175308实验一 《Java开发环境的熟悉》实验报告
2018-2019-2-20175308 实验一 <Java开发环境的熟悉>实验报告 一.实验内容及步骤 (一)使用JDk编译.运行简单的Java程序 输入cd Code命令进入Code目 ...
- (一)RESTful 介绍
什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移”或“表现层状态转化”. R ...
- Arduino入门笔记(7):利用1602、1302实现时钟和定时器
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 常常听到老妈在做饭时说“开锅15分钟后叫我一下”,为何不做个定时器,来提醒老妈呢 ...
- Docker搭建Mysql容器
转载自:http://blog.csdn.net/Mungo/article/details/78521832?locationNum=9&fps=1 本文介绍如何使用docker迅速搭建My ...
- 从0开始学golang--2.1--如何去爬园子的数据
20天过去了,才开始写...主要还是因为自己懒吧.之前一边上班一边也有挤时间练习golang,可是写博客却老是不能行动,跑步也没跑了.突然的就懈怠了快一个月.可能也和开始玩the elder scro ...
- 2017-2018-2 『网络对抗技术』Exp2:后门原理与实践
1. 后门原理与实践实验说明及预备知识 一.实验说明 任务一:使用netcat获取主机操作Shell,cron启动 (0.5分) 任务二:使用socat获取主机操作Shell, 任务计划启动 (0.5 ...
- 20155317王新玮《网络对抗技术》实验8 WEB基础实践
20155317王新玮<网络对抗技术>实验8 WEB基础实践 一.实验准备 1.0 实验目标和内容 Web前端HTML.能正常安装.启停Apache.理解HTML,理解表单,理解GET与P ...