<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. Python的静态方法和类成员方法都可以被类或实例访问，两者概念不容易理清，但还是有区别的

    转:http://www.cnblogs.com/2gua/ Python的静态方法和类成员方法都可以被类或实例访问,两者概念不容易理清,但还是有区别的: 1)静态方法无需传入self参数,类成员方法 ...

  2. android应用签名详解

    1.Eclipse工程中右键工程,弹出选项中选择 android工具-生成签名应用包: 2.选择需要打包的android项目工程: 3.如果已有私钥文件,选择私钥文件 输入密码,如果没有私钥文件见 第 ...

  3. 数据段描述符和代码段描述符（二）——《x86汇编语言：从实模式到保护模式》读书笔记11

    这篇博文,我们编写一个C语言的小程序,来解析数据段或者代码段描述符的各个字段.这样我们阅读原书的代码就会方便一点,只要运行这个小程序,就可以明白程序中定义的数据段或者代码段的描述符了. 这段代码,我用 ...

  4. JQuery脚本-通过禁用按钮防止表单重复提交

    <script type="text/javascript"> /* jquer 脚本,避免重复提交 隐藏点击的submit,后在他之后插入同名button伪装成被隐藏 ...

  5. C++程序设计基础（5）sizeof的使用

    1.知识点 (1)sizeof是一个单目运算发,而不是一个函数,其用于获取操作数所占内存空间的字节数. (2)sizeof的操作数可以使类型名,也可以是表达式,如果是类型名则直接获得该类型所占字节数, ...

  6. 【linux相识相知】网络属性配置

    当我们拥有一个崭新的计算机的时候,第一步恐怕都是迫不及待的下载各种软件,看视频,听音乐等,这里的关键的一点是要有网络.现在的个人计算机大部分都是windows操作系统的,接入网络网络很简单,插上网线也 ...

  7. Wp及Windows应用商店程序Logo生成器

    在开发wp或windows应用商店程序时,需要制作不同分辨率下的logo,往往不同分辨率下的logo仅仅是图片尺寸或图片的内边距不同,为了快速生成不同分辨率下的图片,减少工作量,于是就自己动手开发了个 ...

  8. C/C++中的auto关键词

    C语言 auto被解释为一个自动存储变量的关键字,也就是申明一块临时的变量内存. 例如: auto double a=3.7; 表示a为一个自动存储的临时变量. C++语言 C++ 98标准/C++0 ...

  9. 阿里云服务器Linux常用命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  10. Android性能优化之渲染篇

    下面是渲染篇章的学习笔记,部分内容和前面的性能优化典范有重合,欢迎大家一起学习交流! 1)Why Rendering Performance Matters 现在有不少App为了达到很华丽的视觉效果, ...