JS+html5实现异步上传图片显示上传文件进度条功能示例


Posted in Javascript onNovember 09, 2019

本文实例讲述了JS+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>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
js实现的在本地预览图片功能示例
Nov 09 #Javascript
vue 取出v-for循环中的index值实例
Nov 09 #Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 #Javascript
Vue实现页面添加水印功能
Nov 09 #Javascript
vue 实现特定条件下绑定事件
Nov 09 #Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 #Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 #Javascript
You might like
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python解析xml文件操作实例
2014/10/05 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
python分析作业提交情况
2017/11/22 Python
详解Python打包分发工具setuptools
2019/08/05 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
元宵节晚会主持人串词
2014/03/25 职场文书
关于诚信的活动方案
2014/08/18 职场文书
毕业证委托书范文
2014/09/26 职场文书
导游词之桂林山水
2019/09/20 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
如何在Python中妥善使用进度条详解
2022/04/05 Python