html上传图片（进度条变化）、音乐

最新推荐文章于 2023-03-24 10:51:01 发布

邦杠

最新推荐文章于 2023-03-24 10:51:01 发布

阅读量478

点赞数

本文链接：https://blog.csdn.net/weixin_42981419/article/details/86162434

版权

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>

posted @ 2018-11-07 15:42 韦邦杠阅读( ...) 评论( ...) 编辑收藏

邦杠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html上传图片（进度条变化）、音乐

html上传图片（进度条变化）、音乐 &lt;html&gt;&lt;head&gt; &lt;title&gt;$Title$&lt;/title&gt;&lt;/head&gt;&lt;link href="css/bootstrap.css" rel="stylesheet"/&gt;&lt
复制链接

扫一扫