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;
}
}
input上传mp3格式文件,预览并且获取时间的更多相关文章
- HTML5 原生API input file 来实现多图上传,并大图预览
闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- JavaScript实现本地图片上传前进行裁剪预览
本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...
- javascript上传多张图片并预览
直接上代码 html代码 <div> <label>封面</label> <input type="file" id="cove ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...
- 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片
大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
- 上传APP加入视频预览--精简点名
上传APP加入视频预览--精简点名 在为精简点名APP制作视频预览时的坑: 1.视频预览不能太长.也不能太短15-30s就好.我录制的是18s 2.视频的帧数不能太大.也就是说你在录制视频的时候.要慢 ...
- html5上传本地图片,在线预览及裁剪(filereader,canvas)
1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...
随机推荐
- KNN算法识别手写数字
需求: 利用一个手写数字“先验数据”集,使用knn算法来实现对手写数字的自动识别: 先验数据(训练数据)集: ♦数据维度比较大,样本数比较多. ♦ 数据集包括数字0-9的手写体. ♦每个数字大约有20 ...
- SOLID Principles
Intention: more understandable, easier to maintain and easier to extend.(通过良好的设计使得代码easy and simple, ...
- IntelliJ IDEA控制台启动Tomcat输出中文乱码问题
IntelliJ IDEA控制台输出中文乱码问题 1. 先解决Tomcat中文乱码问题 参考 Tomcat 输出日志出现中文乱码 2. 解决Idea配置问题 打开IntelliJ IDEA本地安装目 ...
- 《浏览器工作原理与实践》<09>块级作用域:var缺陷以及为什么要引入let和const?
在前面我们已经讲解了 JavaScript 中变量提升的相关内容,正是由于 JavaScript 存在变量提升这种特性,从而导致了很多与直觉不符的代码,这也是 JavaScript 的一个重要设计缺陷 ...
- 安装 ALC 解决 centos8 不能播放多媒体的问题
装完centos8 后,发现看不到视频,听不到音乐,连web在线听音乐也不行.通过安装ALC可以解决. 1.三步安装VLC 这是 centos8 的安装包,曾使用 8 之前的版本安装是不成功的 sud ...
- 求输入数字的阶乘 及加和 #s=1!+2!+3!+…..+n!
#s=1!+2!+3!+…..+n! from functools import reduce def factorial(n): result=0 for i in range(1,n+1): re ...
- webpac4k运行webpack .\src\main.js .\dist\bundle.js打包出错
打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 运行webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: WARNING ...
- Nginx服务器的Websockets配置方法
这篇文章主要介绍了简介Nginx服务器的Websockets配置方法,是使用Nginx服务器的网管的必备知识XD~需要的朋友可以参考下 Nginx 1.3.13 已经发布了,该版本支持 Connect ...
- FastDFS-基本介绍
1. 什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用Fas ...
- 双向绑定v-bind
通过v-model绑定输出数据 <script> export default { data() { return { pagestyle:'https://v4.bootcss.com/ ...