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进度条顺滑版实现
进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...
随机推荐
- TOJ 1717 WOJ
描述 Alex likes solving problems on WOJ (http://acm.whu.edu.cn/oak). As we all know, a beautiful ballo ...
- Linux虚拟内存系统详解
本文章以Linux为例,讲解一下虚拟内存系统的工作原理,windows系统的原理也是大同小异,有兴趣的读者可以自行查阅相关资料. linux内核以及它管理用户内存的机制,下面我们以应用程序gonzo的 ...
- QQ音乐：React v16 新特性实践
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ音乐技术团队发表于云+社区专栏 自从去年9月份 React 团队发布了 v16.0 版本开始,到18年3月刚发布的 v16.3 版 ...
- Find command usage in Linux with excellent examples--reference
http://www.coolcoder.in/2014/02/find-command-usage-in-linux-with.html find searches the directory tr ...
- 测试UTC时间可以用的网址
需要FQ的网址 https://time.artjoey.com/cn/ 不需要FQ的网址 https://time.is/ http://time.123cha.com/?q=Minsk
- [译]理解 Windows UI 动画引擎
本文译自 Nick Waggoner 的 "Understand what’s possible with the Windows UI Animation Engine",已获原 ...
- artDialog组件应用学习（三）
一.可以加载url的对话框 预览: 对话框编写代码 //弹出一个对话框,加载页面 function OpenBox(url, title, width, height) { seajs.use(['j ...
- rest-framework框架——解析器、ur控制、分页、响应器、渲染器、版本
一.解析器(parser) 解析器在reqest.data取值的时候才执行. 对请求的数据进行解析:是针对请求体进行解析的.表示服务器可以解析的数据格式的种类. from rest_framework ...
- Required Integer parameter 'XXX' is not present
1.异常提示: DEBUG o.s.w.s.m.m.a.ServletInvocableHandlerMethod - Error resolving argument [2] [type=java. ...
- The nineteenth day
Twinkle,twinkle,little start! 闪烁,闪烁,小星星 How I wonder what you are, 我想知道你是什么 Up above the world so hi ...