tofacebook.com -专业IT技术社区 html上传图片(进度条变化)、音乐 Web程序【tofacebook.com】 - tofacebook.com-专业IT技术社区
143°

html上传图片(进度条变化)、音乐 Web程序【tofacebook.com】

标签:login   图片   boot   load   lin   src   onchange   val   ada   

技术分享图片

<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上传图片(进度条变化)、音乐

标签:login   图片   boot   load   lin   src   onchange   val   ada   

原文地址:https://www.cnblogs.com/weibanggang/p/9922898.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: