zoukankan      html  css  js  c++  java
  • input上传mp3格式文件,预览并且获取时间

    <input type="file" id="file" name="file" class="upfile" onchange="fileupload(this)"/>
    
    <audio id="audio" controls="" style="display: none;"></audio>
        //附件展示
        $(function () {
                $("#file").change(function () {
                    var objUrl = getObjectURL(this.files[0]);
                    $("#audio").attr("src", objUrl);
                    $("#audio")[0].play();
                    $("#audio").show();
                    getTime();
                });
            });
            <!--获取mp3文件的时间 兼容浏览器-->
            function getTime() {
                setTimeout(function () {
                    var duration = $("#audio")[0].duration;
                    if(isNaN(duration)){
                        getTime();
                    }
                    else{
                        console.info("该歌曲的总时间为:"+$("#audio")[0].duration+"秒")
                    }
                }, 10);
            }
            <!--把文件转换成可读URL-->
            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }
    
    //这里以下是对上传文件的验证
    //音频文件上传
        function fileupload(file){
            if(file==null || file==undefined || file==''){
                $("#file").val("");
                window.top.customAlertTip("", "上传的附件不存在!", "warning");
                return;
            }
            //验证音频文件格式
            var b = fileValvoic(file);
            if(!b){
                $("#file").val("");
                return;
            }
                
        }
        //验证后缀
        function endWith(name,end){
            var filename = name.split(".");
            if(filename[filename.length-1]==end){
                return true;
            }else{
                return false;
            }
        }
        //验证音频格式和大小
        function fileValvoic(target){   
        
              var isIE = /msie/i.test(navigator.userAgent) && !window.opera;       
            var fileSize = 0;   
            var fileName = null;       
            if (isIE && !target.files) {      
              var filePath = target.value;      
              var fileSystem = new ActiveXObject("Scripting.FileSystemObject");         
              var file = fileSystem.GetFile (filePath);      
              fileSize = file.Size;   
              fileName = file.Name;  
            }else{     
                 fileSize = target.files[0].size;    
                 fileName = target.files[0].name;  
            }
            
            if(!endWith(fileName,"mp3")){
                window.top.customAlertTip("", "上传的附件不是mp3格式!", "warning");
                return false;
            }
            
            var size = fileSize / 1024 / 1024;   
            if(size>10){   
                window.top.customAlertTip("", "附件大小超过10M!", "warning");
                 return false;
            }else{
                return true;
            }   
        }  
  • 相关阅读:
    详细解说仿制QQ列表 展开和收起列表
    带大家一步一步封装聊天键盘(三)新增功能不要错过哟
    带大家一步一步封装一个聊天键盘(二)
    带大家一步一步的封装一个聊天键盘(一)
    iOS中的屏幕适配之Autolayout(初级)
    iOS开发中tableViewCell的悬浮效果
    [Leetcode] 1343. Maximum Product of Splitted Binary Tree | 分裂二叉树的最大乘积
    [Leetcode] 560. Subarray Sum Equals K | 和为K的子数组
    爆炸!iOS资源大礼包(持续更新...)
    Objective-C探究alloc方法的实现
  • 原文地址:https://www.cnblogs.com/gjths/p/11196352.html
Copyright © 2011-2022 走看看