<html>

<head>

    <title>$Title$</title>

</head>

<link href="css/bootstrap.css" rel="stylesheet"/>

<script src="js/jquery-1.11.3.js"></script>

<script>

    $(function () {

        $.get("login.html", {name: "John", time: "2pm"},

            function (data) {

                console.log(data);

            });

    })

</script>

<body>

<h1>音乐：</h1>

<p>

<input id="myfile" type="file" multiple="multiple" onchange="previewWithObjectURL()"/>

<audio controls="controls" id="myaudio" src="" />

</p>

<h1>图片：</h1>

<p>

<input id="mys" type="file" multiple="multiple" onchange="previewWithObject()"/>

<img id="myimg" src=""/>

</p>

<progress id='progress' style='width:100px'></progress>

<script>

    //音乐

    function previewWithObjectURL() {

        var target=event.target.files[0];

        var url=URL.createObjectURL(target);

        myaudio.src=url;

        //直接播放

        myaudio.play();

        console.log(url);

    }

    //图片

    function previewWithObject() {

        //方式一：

        ///var files = document.getElementById("myfile").files[0];

        var read = new FileReader();

        read.readAsDataURL(event.target.files[0]);

        read.onprogress = function (event) {

            //实现进度条

            if(event.lengthComputable)

            document.getElementById("progress").value=event.loaded/event.total;

            document.getElementById("p1").value=event.loaded/event.total;

        }

        read.onload = function (event) {

            myimg.src=event.target.result;

        }

        //方式二:

        //var target=event.target.files[0];

        //var url=URL.createObjectURL(target);

        //myimg.src=url;

    }

</script>

</body>

</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. C++ 17的新标准

    几个自己比较关注的C++新标准,说是17的标准,不过估计要拖到20才能真正支持   Module python的import之类的东西   解决问题: include头文件导致速度变慢的问题   目前 ...

  2. opensuse13.1 安装 SqliteMan

    Sqliteman是一个图形界面的sqliteman客户端 官网  http://www.sqliteman.com/ 1 添加源 http://download.opensuse.org/repos ...

  3. 网站加入QQ聊天链接

    有时候我们的网站需要加入客服聊天功能,实现方式各不相同同,对于流量不大的网站,可以加入qq聊天的链接,点击链接,会打开本地qq的聊天窗口, 和指定的人会话.实现方式很简单,就是一个<a>标 ...

  4. tornado handler 方法复用的 3 个方法

    tornado handler 调用 特性 在一次 tornado 请求中调用其他 tornado handler 中的方法, 比如 run 方法 引言 在后台开发中, 有时需要做一些功能的整合, 比 ...

  5. java poi reader常用API汇总

    注意:(1)判断行的最大数量建议使用sheet.getLastRowNum();(2)判断每行最大列数建议使用row.getLastCellNum(); [JAVA]特别注意,POI中getLastR ...

  6. asp ajax

    //[AjaxPro.AjaxMethod()] //public DataTable loadChecked() //{ // return BDAContext.GetObject<ICNP ...

  7. 【学习笔记】使用SQLyog连接MySQL数据库

    一.使用SQLyog创建数据库用来管理学生信息 #创建数据库student DROP DATABASE IF EXISTS Myschool; CREATE DATABASE Myschool; #在 ...

  8. XtraTabPage右键菜单(关闭当前页、关闭其它页、所有关闭的实现)

    实现的需求: 用户习惯是一个不可忽略的东西,默认这版的dx的tab也木有右键操作,但用户习惯操作如浏览器都有右键关闭功能,故这里实现先dx的该功能 技术实现: (1)在winform的相应控件内,拖入 ...

  9. Intent的简单使用

    主要实现Intent之间值得转递,如从AActivity到BActivity之间传一个数值,一个实体类,一个集合类 下面代码只要是实现对startActivityForResult的使用,用ABC 3 ...

  10. 面试题之------Java 反射机制

    一.反射机制概述 Java 反射机制是在运行状态中,对于任意一个类,都能够获得这个类的所有属性和方法,对于任意一个对象都能够调用它的任意一个属性和方法.这种在运行时动态的获取信息以及动态调用对象的方法 ...