<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异步上传图片显示上传文件进度条的更多相关文章

  1. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  2. node实现http上传文件进度条 -我们到底能走多远系列（37）

    我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...

  3. php上传文件进度条

    ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...

  4. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  5. 折叠面板实现，上传文件进度条，三级联选择器，多级联选择器， 利用layui实现

    首先贴出html代码 <form class="layui-form" action=""> <div class="layui-f ...

  6. ajax上传文件进度条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  8. 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 ...

  9. Android中实现异步轮询上传文件

    前言 前段时间要求项目中需要实现一个刷卡考勤的功能,因为涉及到上传图片文件,为加快考勤的速度,封装了一个异步轮询上传文件的帮助类 效果  先上效果图 设计思路 数据库使用的框架是GreenDao,一个 ...

随机推荐

  1. C#- 操作Ini文件

    以前习惯了使用.NET中的WEB.CONFIG或者APP.CONFIG,最近在做项目的时候遇到了些问题,发现没办法使用这些CONFIG文件.一开始我的做法是建一个文本文件,自己定规律,自己写方法去写新 ...

  2. Hyper-V介绍

    Hyer-v主机是高端虚拟主机用户的最佳选择.您不再受其他用户程序对您造成的影响,您将得到的是更加公平的资源分配,远远低于虚拟主机的故障率.Hyper-V的分区包含两种:父分区和客户分区.Hyper- ...

  3. zend studio-如何更改字符集

    在加载一个项目的过程中很时候会因为字符集的不匹配从而导致项目文件显示为乱码,zend studio开发工具应该如何设置字符集呢: 打开[windows]-[preference]-[workspace ...

  4. c随机数的产生（续）

    经过反复调试得出: srand((unsigned) time(0))函数提供的应该是程序启动的时间或某个固定时间,在一个程序中只需提供一次即可.rand()函数会自动记录处理 经过反复调试得出: s ...

  5. 安卓开发中使用Genymotion模拟器

    在安卓开发中,运行和调试自己所写的安卓程序需要用到模拟器 在一般情况下 是直接在这创建一个模拟器,但是这种自带的模拟器运行效率不佳,而且启动时间漫长 所以,我们可以换一款安卓模拟器 Genymotio ...

  6. WINDOWS Server2003上部署一个Asp.Net的网站

    对于许多新手来说,如何在服务器上部署网站并不了解,这个教程希望对新手有帮助. 1.IIS服务器 2..Net Framework3.5 (方便起见,我们这里Framework说的都是指的这个版本) 这 ...

  7. c语言，strchr(),查找字符串中第一次字符出现的位置

    int main(void) { char string[15]; char *ptr, c = 's'; strcpy(string, "This is a string"); ...

  8. Vim常见快捷键汇总

    编辑命令: i 词前插入 a 词后插入 I 行首插入 A 行尾插入 o 新建一行编辑 O 在上面新建一行 插入: 10 i * [ESC] 插入10个* 25 a xx [ESC] 插入25个xx J ...

  9. 关于“VS2010语法检查红线不见了”的解决方案

    操作步骤:工具=>导入导出设置=>重置所有设置=>重置C#(一般选择这个,其他没试过) 等待1分钟,over.

  10. "只能在执行Render()的过程中调用RegisterForEventValidation" 解决方案

    开发中遇到令人蛋疼的问题: 只能在执行Render()的过程中调用RegisterForEventValidation 当出现的异常的提示: 异常详细信息: System.InvalidOperati ...