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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jquery高效反选具体实现
May 05 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
vue实现户籍管理系统
May 29 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
Vue程序调试的方法
2019/06/17 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
商务助理岗位职责
2013/11/13 职场文书
个人评价范文分享
2014/01/11 职场文书
体育教师自我鉴定
2014/02/12 职场文书
质量保证书范本
2014/04/29 职场文书
给校长的建议书400字
2014/05/15 职场文书
党员干部一句话承诺
2014/05/30 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
联谊活动总结范文
2015/05/09 职场文书
高中信息技术教学反思
2016/02/16 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
Golang bufio详细讲解
2022/04/21 Golang
nginx lua 操作 mysql
2022/05/15 Servers