html上传图片（进度条变化）、音乐
<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上传图片（进度条变化）、音乐的更多相关文章
- formdata 上传图片+进度条
记得引入jquery //上传进度回调函数: function progressHandlingFunction(e) { if (e.lengthComput ...
- 使用axios实现上传图片进度条
在最近做的项目中,一个手机页面最多要上传几十张图片,虽然对照片做了压缩处理,不过最后还是很大,如果网卡的话,上传的时间很差,如果一直在loading的话,用户都不知道什自己上传了多少,为了更直观的展现 ...
- Android课程---用进度条改变图片透明度
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- Android课程---进度条及菜单的学习
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- android 14 进度条和拖动条
进度条: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:l ...
- Android特效专辑（十一）——仿水波纹流量球进度条控制器，实现高端大气的主流特效
Android特效专辑(十一)--仿水波纹流球进度条控制器,实现高端大气的主流特效 今天看到一个效果挺不错的,就模仿了下来,加上了一些自己想要的效果,感觉还不错的样子,所以就分享出来了,话不多说,上图 ...
- Cocos2d-x 3.1.1 Lua演示样例 ActionsProgressTest（进度条）
Cocos2d-x 3.1.1 Lua演示样例 ActionsProgressTest(进度条) 本篇博客介绍Cocos2d-x中的进度条动画,进度条涉及以下几个重要的类和方法,笔者来给大家具体解说一 ...
- jQuery如何使用键盘事件，按住空格键完成进度条效果，并终止键盘事件
jQuery使用键盘事件 keyup:键盘抬起时 keydown:键盘按下时 keypress:键盘按住时 运行下列代码,可以看效果 $(document).keyup(function () { c ...
- JS进度条顺滑版实现
进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...
随机推荐
- mac上k8s学习踩坑
本文学习k8s参考内容:http://docs.kubernetes.org.cn/126.html,学习过程中遇到一些坑,记录如下: -------------------------------- ...
- js 中移动元素的方法
2017-12-13 19:59:24 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Java Collection.Set
package 集合; /** * Set不包含重复元素 存储顺序和取出数据不一样 * * HashSet:它不保证set的迭代顺序,特别是它不保证该顺序恒久不变 * 底层是哈希表结构的 * Link ...
- Win10新建分区
今天忽然觉得将系统分为四个盘,有点无法将分类分开,所以增加了几个分区: 1.windows+X键在弹出的对话框中选择磁盘管理,进入如下界面: 2.如果你想从某个盘分出一些内存建立一个新的分区,就在这个 ...
- html元素固定
1.position 值 描述 static 默认.位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top.bottom.left 或 ri ...
- Python3.4 获取百度网页源码并保存在本地文件中
最近学习python 版本 3.4 抓取网页源码并且保存在本地文件中 import urllib.request url='http://www.baidu.com' #上面的url一定要写明确,如果 ...
- CSP学习之CryptoAPI初识
Crypto API目的就是提供开发者在windows下使用PKI的编程接口. Crypto 提供了很多的加解密相关函数,如编码.解码.加密解密,哈希,数字证书.证书管理证书存储等. 有关 ...
- springboot从入门到精通（二）
这一节我们一起用springboot开发一个应用程序,应用程序里的核心概念是玩家获取英雄列表上的英雄信息. 1.定义实体模型: 代码如下: package com.dota.herolist.enti ...
- 1.浅析Hadoop之HDFS
HDFS ,Hadoop Distribute File System,hadoop分布式文件系统. 主从架构,分主节点NameNode,从节点DataNode.当然还有个SecondaryName, ...
- 重构指南 - 移除重复内容（Remove Duplication）
在项目中或多或少的都存在着重复的或者功能相似的代码,如果要对代码做改动,就要修改多个地方,所以我们需要将多处重复的代码提取到一个公共的地方供统一调用,以减少代码量,提高代码可维护性. 重构前代码 pu ...