html5文件上传
<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上传文件</title>
</head>
<body>
<progress id="progressBar" value="0" max="100">
</progress>
<span id="percentage"></span>
<br />
<input type="file" id="file" name="Filedata" onchange="handleFiles(this)"/>
<input type="button" onclick="UpladFile()" value="submit" />
<div id="fileList" style="width:200px;height:200px;"></div>
<script type="text/javascript">
function handleFiles(obj){
var files = obj.files;
var img = new Image();
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(e){
alert(files[0].name + "," +e.total + " bytes");
img.src = this.result;
img.width = 200;
fileList.appendChild(img);
}
}
function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
// FormData 对象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表单数据
form.append("file", fileObj); // 文件对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.onload = function () {
alert("success");
};
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.send(form);
}
function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
}
}
</script>
</body>
</html>
html5文件上传的更多相关文章
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- HTML5文件上传还有进度条
以下是自学it网--中级班上课笔记 网址:www.zixue.it 需要在chrome,ff,IE10下运行 html页面 <!DOCTYPE html> <html lang=&q ...
- 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器
老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...
- AJAX文件上传实践与分析，带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- php html5 文件上传 (原创)
今天自己写了一个HTML5+FileReader+php 的文件上传,ajax异步上传也支持 git 下载:git clone https://github.com/jiechengyang/HTML ...
- HTML5 : 文件上传下载
网站建设中,文件上传与下载在所难免,HTML5中提供的API在前端有着丰富的应用,完美的解决了各个浏览器的兼容性问题,所以赶紧get吧! FileList 对象和 file 对象 HTML 中的 in ...
- html5文件上传断点续传
最近公司要做一个html5上传的jquery插件,要在下先实现功能,要求显示上传进度,文件信息,断点续传等等.我一看,艾玛!Σ(ﾟдﾟlll),没做过啊.没办法,(# ﾟДﾟ),只能去查资料了.作为一 ...
- HTML5 文件上传
这篇随笔主要引用https://juejin.im/post/59598ecf5188250d8d141fff,只用于自己学习,不对外宣传. FileList 对象和 file 对象 input[ty ...
- HTML5文件上传器，纯脚本无插件的客户端文件上传器---Uploader 文件上传器类
概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...
随机推荐
- php--数据库三范式
关系数据库的几种设计范式介绍1.第一范式(1NF) 在任何一个关系数据库中,第一范式(1NF)是对关系模式的基本要求,不满足第一范式(1NF)的数据库就不是关系数据库. 所谓第一范式(1NF)是指数据 ...
- js实现表格信息的删除和添加
制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮 ...
- 常用jQuery代码03
1.查看浏览器信息 navigator.userAgent 检索浏览器信息包括哪些字符 例如: if (navigator.userAgent.toLowerCase().indexOf(" ...
- ArcGIS中添加进自定义的ttf字符标记符号
原文:ArcGIS中添加进自定义的ttf字符标记符号 ArcGIS系统中的样式可能不能满足实际生产需要,为了实现快速制图,可自定义一些样式,以便重复利用. 1. 制作的符号库 使用 FontCre ...
- python echo服务器和客户端（客户端可以用telnet之类的）
发上来记录一下,省得下次再写一遍 服务器:server.py #-*- coding:utf-8 -*- from SocketServer import TCPServer, BaseRequest ...
- JavaWeb学习笔记（一）Mac 下配置Tomcat环境
最近,想鼓捣与服务器端的交互,只能自己搭建环境了. 上个周一鼓捣了一点,周五再鼓捣,发现忘得已经差不多了.好记性不如烂笔头,还是记录下来比较好. 首先,去Tomcat的官网,下载Mac版的Tomca ...
- JMeter学习-009-JMeter 后置处理器实例之 - 正则表达式提取器（二）多参数获取
前文简述了通过后置处理器 - 正则表达式提取器 获取 HTTP请求 响应结果中的特定数据,未看过的亲,敬请参阅 JMeter学习-008-JMeter 后置处理器实例之 - 正则表达式提取器(一). ...
- i++和++i的区别
先看如下程序: class Program { static void Main(string[] args) { ; ; ; ; x = i++; Console.WriteLine("x ...
- asp.net操作xml
下面是xml文档内容: <content width="368" height="450" bgcolor="cccccc" load ...
- 线上Linux服务器运维安全策略经验分享
线上Linux服务器运维安全策略经验分享 https://mp.weixin.qq.com/s?__biz=MjM5NTU2MTQwNA==&mid=402022683&idx=1&a ...