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 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
validform表单验证的实现方法
Mar 08 Javascript
Vue引入Stylus知识点总结
Jan 16 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
239军机修复记
2021/03/02 无线电
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
Javascript面向对象编程
2012/03/18 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python中变量交换的例子
2014/08/25 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
年会活动策划方案
2014/01/23 职场文书
英语课外活动总结
2014/08/27 职场文书
践行三严三实心得体会
2014/10/13 职场文书
2015元旦感言
2015/12/09 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
导游词之吉林花园山
2019/10/17 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python