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进度条顺滑版实现
进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...
随机推荐
- sqlplus连接oracle语法
sqlplus文件在product\11.2.0\dbhome_1\BIN目录下. 连接语法:用户名/密码@ip/服务名
- Jenkins+Postman+Newma+Xmysql之API全自动化测试
第一章 前期准备:各种安装配置介绍 ①Postman安装及使用 ②Newman 安装及使用 ③Xmysql 安装及使用 ④Jenkins安装及配置 1.postman 安装及使用 1.1.postma ...
- 深入理解JavaScript系列（16）：闭包（Closures）
介绍 本章我们将介绍在JavaScript里大家经常来讨论的话题 —— 闭包(closure).闭包其实大家都已经谈烂了.尽管如此,这里还是要试着从理论角度来讨论下闭包,看看ECMAScript中的闭 ...
- jdbc封装DBUtil
1.编写实体类User public class User { private Integer id; private String username; private Integer age; pr ...
- ADO.NET教程（1）初识ado.net
ADO.NET简介 ADO.NET使用到的类 需掌握的方法和属性 ado.net连接实例 ADO.NET的名称起源于ADO(ActiveX Data Objects),是一个COM组件库,用于在以往的 ...
- css-css简介
CSS:层叠样式表 ** 层叠:一层一层的 ** 样式表:很多的属性和属性值 * 使页面显示效果更好 * CSS将网页内容和显示样式进行分离,提高了显示功能.
- ArcGIS Enterprise 10.5.1 静默安装部署记录（Centos 7.2 minimal）- 6、总结
安装小结 安装完成后,首先我们需要将Datastore托管给Server,再将Server托管给Portal以此来完成整个单机版Enterprise 部署流程.为了测试流程是否正确,我们可以采用上传一 ...
- Microsoft Translator：打破语言障碍 拓展全球沟通新机遇
作者:Olivier Fontana, 微软研究院Microsoft Translator产品战略总监 世界越来越小,全球协作.共同创新已经成为常态.在微软研究院,我们对此尤为感同身受——从北京到雷德 ...
- [C#]委托和事件(转载)
原文地址:http://blog.csdn.net/dingxiaowei2013/article/details/20249163 引言 委托 和 事件在 .Net Framework中的应用非常广 ...
- CentOS7 查询已安装的包方便整理 /卸载
以PHP为例.首先查看已安装的PHP rpm -qa |grep php 输出结果: php-cli--.el7.x86_64 php-common--.el7.x86_64 查询rpm包的安装时间和 ...