html5异步上传图片显示上传文件进度条
<html>
<head> </head>
<body>
<p>
emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'>
</p>
<p>
name:<input type="text" name="title" id="title">
</p>
<div class="row"> <label for="file">
Upload Image:</label>
<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected();" />
</div>
SentenceMovie[photo]
<div id="fileName">
</div>
<div id="fileSize">
</div>
<div id="fileType">
</div>
<div id="progressNumber">
</div> <script>
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
uploadFile();
}
} function uploadFile() {
var fd = new FormData();
fd.append("upload_file", document.getElementById('fileToUpload').files[0]);
fd.append("emo_album_id", document.getElementById('emo_album_id').value);
fd.append("title", document.getElementById('title').value);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "http://mysae.com/emotions/1/api/index.php/emo/upload");
xhr.send(fd);
} function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
} function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
} function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
} function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</body>
</html>
html5异步上传图片显示上传文件进度条的更多相关文章
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- node实现http上传文件进度条 -我们到底能走多远系列(37)
我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...
- php上传文件进度条
ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...
- asp.net大文件上传与上传文件进度条问题
利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...
- 折叠面板实现,上传文件进度条,三级联选择器,多级联选择器, 利用layui实现
首先贴出html代码 <form class="layui-form" action=""> <div class="layui-f ...
- ajax上传文件进度条
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
- Android中实现异步轮询上传文件
前言 前段时间要求项目中需要实现一个刷卡考勤的功能,因为涉及到上传图片文件,为加快考勤的速度,封装了一个异步轮询上传文件的帮助类 效果 先上效果图 设计思路 数据库使用的框架是GreenDao,一个 ...
随机推荐
- java.util.Map按照key值合并的value的Collection 集合中。
用java实现把多个map的内容合并的一个resultMap中 代码大致如下 /** * @author Shalf */ public class MapUtil { /** * 把partMa ...
- ABAP程序相互调用--SUBMIT
(1) 调用其他程序: * Trigger the IDOC SUBMIT zpcppmd001_idoc AND RETURN. (2) 调用其他程序参数传递参数: *当被调用的程序的屏幕有输入参数 ...
- [转帖] 安装Eclipse插件长时间卡在 calculating requirements and dependencies
把"Contact all update sites during install to find required software"前面的勾去掉,然后点击下一步,这样之后问题迎 ...
- Cocos2d-x创建新工程
转自:http://www.cnblogs.com/andyque/archive/2011/09/27/2192920.html 而是新建一个工程.然后,我们不是copy文件夹.lib和dll了.我 ...
- 利用dom4j读取xml文件
对于xml文件的读取,其实有很多方法,例如:SAX实现方法,DOM4J实现方法 ,DOM 实现方法,JDOM实现方法 等等. 下面,我就说下dom4j的读取方法: 1.首先,肯定要引入第三方jar包. ...
- php连接oracle数据库(linux)(转)
php连接访问Oracle是用过oci函数,以下是整理的文档 1.安装Apache和php包 yum install -y httpd php* 2.下载Oracle组件 oracle-instant ...
- 阿里技术保障-KeepAlive
http://blog.sina.cn/dpool/blog/s/blog_e59371cc0102ux5w.html?wm=3049_a111
- 从源码角度深入分析log4j配置文件使用
log4j在日常开发中经常使用,但有时候对 配置文件应该放到什么位置有疑惑.现在我们通过从代码的角度来看待这个问题, 看完后你也许会恍然大悟哦. 开始吧. Log4j的组成及架构: Log4j由三个重 ...
- oh-my-zsh配置 alias 指定指令别名
# vim ~/.zshrc alias ydocx="/Users/wanglili/work/mfe/ydoc/bin/ydoc" # source ~/.zshrc
- Android_life,Intent_note
生命周期: 从出生到死亡 Activity生命周期的7个方法和3个循环 onCreate() 创建时调用onRestart() 不可见到可见时调用onStart() 用户可见时调用onResume() ...