正文
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>
