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;
        }
    }  

原文地址:https://www.cnblogs.com/gjths/p/11196352.html

时间: 2024-10-09 02:23:45

input上传mp3格式文件,预览并且获取时间的相关文章

统一通用文件上传、下载、预览、编辑组件设计

一直以来,无数个项目有这样的需求,然而每个项目做起来都自己开发一套,于是想自己设计实现这样一个组件,实现文件的统一存储. 上传.下载.预览.编辑功能,接口统一,对开发人员完全透明.思路如下: 1.采用统一数据库存储文件元数据信息,文件与业务数据关联信息 2.集成uploadify.Huploadify,html5和flash双内核文件上传 3.集成weboffice,word文档在线编辑 4.集成flexpaper.pdfjs, html5和flash双内核word文档在线查看 5.集成flow

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术:HTML5的api,作为一名前端的菜鸟,没什么可说的,直接分享自己学习的资料: 关于HTML5 的这些新的特性大家可以到Mozilla的开发者社区MDN https://developer.mozilla.org/zh-CN/ 上查HTML5的资料 还有就是发掘到的比较牛逼的一篇博客:http:/

上传APP添加视频预览--精简点名

上传APP添加视频预览--精简点名 在为精简点名APP制作视频预览时的坑: 1.视频预览不能太长,也不能太短15-30s就好:我录制的是18s 2.视频的帧数不能太大,也就是说你在录制视频的时候,要慢点录制: 3.上传时可能会说文件的无法载入,请再次上传,这个多数是你网络不好造成的,找个网络好的时候,重新上传: 4.视频的尺寸是有限制的,需要不同设备的尺寸:这里有个技巧,想要不同的尺寸,那么使用不同的设备进行录制 5.采用什么样的软件,其实使用QuickTime+iphone就可以搞定,也不需要

html5上传本地图片,在线预览及裁剪(filereader,canvas)

1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewImage(file) { if (file.files && file.files[0]) { var img = document.getElementById('imghead'); var reader = new FileReader(); //读取file完成之后加载 reader.o

ssh文件上传、下载、预览

1.预览:openoffice,微软自带,jacob(linux不适用且需配置动态链接库),poi(office格式多样化处理较麻烦),永中office(qq.163等使用此种方法,但收费). openoffice:https://blog.csdn.net/ITBigGod/article/details/80300177 jacob:https://www.cnblogs.com/itred/p/4345506.html 2:上传下载: https://www.cnblogs.com/xia

&lt;input type=&quot;file&quot;&gt;图片上传时,先预览

<label> <input type="file" id="upload"> </label> js $("#upload").on('change',function(){ var file = this.files[0]; console.log(this.files); var reader = new FileReader(); //读取文件过程方法 reader.onloadstart = func

html多文件上传,可支持预览

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单提交</title> 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 7 &

JavaScript图片上传前的图片预览功能

JS代码: 1 //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 2 function PreviewImage(fileObj, imgPreviewId, divPreviewId) { 3 var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value; 4 v