1. <html>
  2. <head>
  3.     <title>$Title$</title>
  4. </head>
  5. <link href="css/bootstrap.css" rel="stylesheet"/>
  6. <script src="js/jquery-1.11.3.js"></script>
  7. <script>
  8.     $(function () {
  9.         $.get("login.html", {name: "John", time: "2pm"},
  10.             function (data) {
  11.                 console.log(data);
  12.             });
  13.     })
  14. </script>
  15. <body>
  16. <h1>音乐：</h1>
  17. <p>
  18. <input id="myfile" type="file" multiple="multiple" onchange="previewWithObjectURL()"/>
  19. <audio controls="controls" id="myaudio" src="" />
  20. </p>
  21.  
  22. <h1>图片：</h1>
  23. <p>
  24. <input id="mys" type="file" multiple="multiple" onchange="previewWithObject()"/>
  25. <img id="myimg" src=""/>
  26. </p>
  27. <progress id='progress' style='width:100px'></progress>
  28.  
  29. <script>
  30.     //音乐
  31.     function previewWithObjectURL() {
  32.         var target=event.target.files[0];
  33.         var url=URL.createObjectURL(target);
  34.         myaudio.src=url;
  35.         //直接播放
  36.         myaudio.play();
  37.         console.log(url);
  38.     }
  39.     //图片
  40.     function previewWithObject() {
  41.         //方式一：
  42.  
  43.         ///var files = document.getElementById("myfile").files[0];
  44.         var read = new FileReader();
  45.         read.readAsDataURL(event.target.files[0]);
  46.         read.onprogress = function (event) {
  47.             //实现进度条
  48.             if(event.lengthComputable)
  49.             document.getElementById("progress").value=event.loaded/event.total;
  50.             document.getElementById("p1").value=event.loaded/event.total;
  51.         }
  52.         read.onload = function (event) {
  53.             myimg.src=event.target.result;
  54.         }
  55.  
  56.         //方式二:
  57.         //var target=event.target.files[0];
  58.         //var url=URL.createObjectURL(target);
  59.         //myimg.src=url;
  60.     }
  61. </script>
  62. </body>
  63. </html>

html上传图片（进度条变化）、音乐的更多相关文章

  1. formdata 上传图片+进度条

    记得引入jquery //上传进度回调函数:          function progressHandlingFunction(e) {            if (e.lengthComput ...

  2. 使用axios实现上传图片进度条

    在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果一直在loading的话,用户都不知道什自己上传了多少,为了更直观的展现 ...

  3. Android课程---用进度条改变图片透明度

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. Android课程---进度条及菜单的学习

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  5. android 14 进度条和拖动条

    进度条: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l ...

  6. Android特效专辑（十一）——仿水波纹流量球进度条控制器，实现高端大气的主流特效

    Android特效专辑(十一)--仿水波纹流球进度条控制器,实现高端大气的主流特效 今天看到一个效果挺不错的,就模仿了下来,加上了一些自己想要的效果,感觉还不错的样子,所以就分享出来了,话不多说,上图 ...

  7. Cocos2d-x 3.1.1 Lua演示样例 ActionsProgressTest（进度条）

    Cocos2d-x 3.1.1 Lua演示样例 ActionsProgressTest(进度条) 本篇博客介绍Cocos2d-x中的进度条动画,进度条涉及以下几个重要的类和方法,笔者来给大家具体解说一 ...

  8. jQuery如何使用键盘事件，按住空格键完成进度条效果，并终止键盘事件

    jQuery使用键盘事件 keyup:键盘抬起时 keydown:键盘按下时 keypress:键盘按住时 运行下列代码,可以看效果 $(document).keyup(function () { c ...

  9. JS进度条顺滑版实现

    进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...

随机推荐

  1. AQS的数据结构及实现原理

    接下来从实现角度来分析同步器是如何完成线程同步的.主要包括:同步队列.独占式同步状态获取与释放.共享式同步状态获取与释放以及超时获取同步状态等. 1.同步队列 同步器依赖内部的一个同步队列来完成同步状 ...

  2. ie8点击焦点有虚线框兼容问题

    a标签的: 方法一:在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true” 属性即可,但这个属性是IE私有的,Firefox是不认的. <a hre ...

  3. 深入理解JavaScript系列（3）：全面解析Module模式

    简介 Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式. 首先我们来看看Module模式的基本特征: 模块化,可 ...

  4. docker-compose 安装solr+ikanalyzer

    docker-compose.yml version: '3.1' services: solr: image: solr restart: always container_name: solr p ...

  5. HashTable 元素的查找

    Hashtable 特点:键与值成对存在,键是唯一的,不能重复.在查找元素的时候,我们往往是依据键区查找值的 三种方法 contains   包含 containsKey containsValue ...

  6. HTML表单（form）的“enctype”属性

    Form元素的语法中,EncType表明提交数据的格式 属性值: application/x-www-form-urlencoded:在发送前编码所有字符(默认) multipart/form-dat ...

  7. MFCdll的两种调用方法

        有同事问我mfcdll的掉用方法,这里总结了一下.   1 lib库调用   只要VS能找到dll对应的lib和h文件,就可以开发和调试.包含lib和h文件有两个方法. 第一种方法设置路径是 ...

  8. Android自定义之流式布局

    流式布局,好处就是父类布局可以自动的判断子孩子是不是需要换行,什么时候需要换行,可以做到网页版的标签的效果.今天就是简单的做了自定义的流式布局. 具体效果: 原理: 其实很简单,Measure  La ...

  9. 任务四：CSS定位和居中问题

    任务目标 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 ...

  10. mybatis开发dao的方式

    mybatis基于传统dao的开发方式 第一步:开发接口 public interface UserDao { public User getUserById(int id) throws Excep ...