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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步