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两段代码,两个小技巧
Feb 04 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
JS出现失效的情况总结
Jan 20 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
全国中波电台频率表
2020/03/11 无线电
最小化数据传输――在客户端存储数据
2006/10/09 PHP
mysql limit查询优化分析
2008/11/12 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
js列举css中所有图标的实现代码
2011/07/04 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Python更换pip源方法过程解析
2020/05/19 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
会议邀请书范文
2014/02/02 职场文书
信息技术培训感言
2014/03/06 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
志愿者工作心得体会
2016/01/15 职场文书
担保书怎么写 ?
2019/04/22 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
golang 实用库gotable的具体使用
2021/07/01 Golang