zoukankan      html  css  js  c++  java
  • 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='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>
  • 相关阅读:
    课堂练习-找水王绪
    输入法评估
    课堂练习-找水王
    课堂练习—电梯调度
    第一阶段冲刺总结
    《你的灯亮着吗》阅读笔记Ⅱ
    《你的灯亮着吗》阅读笔记Ⅰ
    软件工程——寻找水桶
    软件工程——寻找水王
    软件工程——典型用户
  • 原文地址:https://www.cnblogs.com/weibanggang/p/9922898.html
Copyright © 2011-2022 走看看