<!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文件上传的更多相关文章

  1. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  2. HTML5文件上传还有进度条

    以下是自学it网--中级班上课笔记 网址:www.zixue.it 需要在chrome,ff,IE10下运行 html页面 <!DOCTYPE html> <html lang=&q ...

  3. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  4. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  5. php html5 文件上传 (原创)

    今天自己写了一个HTML5+FileReader+php 的文件上传,ajax异步上传也支持 git 下载:git clone https://github.com/jiechengyang/HTML ...

  6. HTML5 : 文件上传下载

    网站建设中,文件上传与下载在所难免,HTML5中提供的API在前端有着丰富的应用,完美的解决了各个浏览器的兼容性问题,所以赶紧get吧! FileList 对象和 file 对象 HTML 中的 in ...

  7. html5文件上传断点续传

    最近公司要做一个html5上传的jquery插件,要在下先实现功能,要求显示上传进度,文件信息,断点续传等等.我一看,艾玛!Σ(ﾟдﾟlll),没做过啊.没办法,(# ﾟДﾟ),只能去查资料了.作为一 ...

  8. HTML5 文件上传

    这篇随笔主要引用https://juejin.im/post/59598ecf5188250d8d141fff,只用于自己学习,不对外宣传. FileList 对象和 file 对象 input[ty ...

  9. HTML5文件上传器，纯脚本无插件的客户端文件上传器---Uploader 文件上传器类

    概述 客户端完全基于JavaScript的 浏览器文件上传器,不需要任何浏览器插件,但需要和jQuery框架协同工作,支持超大文件上传,其算法是将一个超大文件切片成N个数据块依次提交给服务 端处理,由 ...

随机推荐

  1. [LeetCode] Sudoku Solver（迭代）

    Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated by th ...

  2. TermServDevices错误

    来源TermServDevices的错误日志,日志内容 事类型:     错误 事件来源:     TermServDevices 描述 打印机 XXXX 所需的驱动程序 XXX 未知.登录之前,请与 ...

  3. js保留n位小数

    1.功能:将浮点数四舍五入,取小数点后2位 function toDecimal(num) { var f = parseFloat(num); if (isNaN(f)) { return; } f ...

  4. DBCC TRACEON/TRACEOFF/TRACESTATUS

    1. enable trace DBCC TRACEON ( trace# [ ,...n ][ , -1 ] ) [ WITH NO_INFOMSGS ] trace# Is the number ...

  5. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  6. ELK-Python（三）

    不具有通用性,留作纪念. [root@GXB-CTRLCENTER python]# cat insert_uv.py #!/usr/bin/env python # -*- coding:utf-8 ...

  7. 第一个thinkphp入口文件

    ThinkPHP3.1.3_full已下载 网站根目录下编辑一个入口文件index.php <?php define('APP_NAME','Index'); //项目名称 define('AP ...

  8. Power Bi的优势 特色功能

    Power-BI可以让决策者不再依赖他人,就可及时.准确(没有人为加工,自然是最准确的)的得到各种关键经营数据: Power-BI不仅仅是让报表自动生成,而是完全改变了获取经营数据的方式,它可以直观的 ...

  9. mac电脑忘记账户名密码解决方法

    1,重启电脑 ,开机按command+R 2,等苹果开机完成后会进入单用户模式.然后从单用户模式进入终端. 3,在终端里面输入resetpassword. 4,选择系统(root)账户重新输入密码,存 ...

  10. Oracle数据库之PL/SQL基础

    介绍PL/SQL之前,先介绍一个图像化工具:Oracle SQL Developer 在oracle的开发过程中, 我们难免会使用第三方开发的软件来辅助我们书写SQL, pl/sql是一个不错的sql ...