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个数据块依次提交给服务 端处理,由 ...
随机推荐
- 【转】MySQL USE NAMES 'UTF8'
先说MySQL的字符集问题.Windows下可通过修改my.ini内的 # CLIENT SECTION [mysql] default-character-set=utf8 # SERVER SEC ...
- Bulk Insert & BCP执行效率对比（续）
上回由于磁盘空间(约70G)不足,导致Bulk Insert和BCP导入中途失败:今次统一一些操作,以得到Bulk insert与BCP分别执行效率: 1. 15435390笔数据,21.7G csv ...
- SublimeText使用技巧
1.安装package control:ctrl+~ 2.调出命令面板:ctrl+shift+p 3.快出查找(goto Anything):ctrl+p 4.修改文件类型:ctrl+shift+p ...
- Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小（无人值守，节约测试成本的福音，BOSS 最爱）
在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大 ...
- Condition
1.Condition是个接口,其实现类是同步器里面的一个内部静态类:ConditionObject. 2.Lock是个接口,该接口里面有个方法是:Condition newCondition(); ...
- Date and Time Pattern
The following examples show how date and time patterns are interpreted in the U.S. locale. The given ...
- 利用DBMS_ROWID.ROWID_CREATE来找出事务等待的行数据
在v$session视图中有四个字段,如下: Wait information in v$session view ROW_WAIT_OBJ# NUMBER Object ID for the tab ...
- 为什么玩VR眼镜会头晕？
为什么玩VR眼镜会头晕?看完本文你就懂了 很多用户都体验过各式各样的VR眼镜或者说头盔,但是不管哪一款,都很容易出现头晕的情况.相信大家都纳闷过,为什么玩VR眼镜会头晕?实际上这是和设备本身的技术 ...
- nsstring字符串重组
// // main.m // 05-字符串重组 // // Created by apple on 14-3-20. // Copyright (c) 2014年 apple. All ri ...
- openSuSE DNS SERVER CONFIG
system:openSuSE 12.3(much better and frendly than the 12.1 in network config)1,network config,attent ...