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进度条顺滑版实现
进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...
随机推荐
- 2018湖湘杯web、misc记录
1.题目名 Code Check 打开题目,右键发现有id参数的url,简单base64解码以后发现不是明文,说明利用了其他的加密方式,那么应该会有具体的加密方式给我们,于是试试常见的文件泄露,可以发 ...
- 结合manage.py，在flask项目中使用websocket模块--- flask-socketio
前言: - 为什么我要使用 flask-socketio模块,而不是flask-sockets? - 因为flask-socketio与前端流行的websocket库socke ...
- ASP.NET内置对象-网页转向的4中方法
ASP.NET页面跳转的方法 1.超链接 2.Response.Redirect(“Urlstring”) 3.Server.Transfer(“UrlString”) 4.PostBackUrl 1 ...
- linux安装git、node、pm2
一.安装Git 下载:# wget https://www.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz 解压:# tar -zxvf git-2. ...
- git本地分支关联远程分支
问题描述: 从远程master克隆下来以后, 在本地创建wf_dev分支, 此时执行git pull 操作出现图中问题. 这是因为:本地的wf_dev分支还没有和远程的wf_dev进行关联. 执行: ...
- Java开发团队管理细则
软件开发是团队协作,多人开发很容易造成协调问题,因此,做一些必要的开发规范,有助于帮助新员工成长,也有助于提高开发效率,防止各种问题影响开发进度. 1. 代码规范 建议每位java开发人员都读一下&l ...
- js简单时分秒倒计时
效果: javascript: <script type="text/javascript"> function countTime() { //获取当前时间 var ...
- Csharp:操作存儲過程輸出參數，和返回值
/// <summary> ///塗聚文 存儲過程輸出參數,和返回值 /// 20131030 /// Geovin Du /// </summary> /// <par ...
- JavaScript中双叹号(!!)作用
经常看到这样的例子: var a: var b=!!a a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不再是undefined,也非其它值,主要是为后续判 ...
- drupal对数据库操作
// nodenode_load($nid = NULL, $vid = NULL, $reset = FALSE);node_load_multiple($nids = array(), $cond ...