input显示直接选择的图片音乐视频文件(javascript预览图片音乐视频代码)
inpu标签上传文件时,想要预览当前选择的图片音乐视频等文件,我们需要使用javascript代码来实现,读取到当前选择的文件数据,然后判断类型,再创建对象和dom,最后写入到设置好的div元素中,即可实现input显示直接选择的图片音乐视频文件的功能,详细的javascript预览图片音乐视频代码请见下方,可以复制后直接使用。
<div class="wrap"> <input id="file" type="file" accept="image/*,video/*,audio/*" onChange="handleChange()" /> </div> <div id="viewbox"></div> <script type="text/javascript"> function handleChange() { var file = document.getElementById("file").files[0], fileType = file.type, read = new FileReader(); document.getElementById("viewbox").innerHTML=''; read.readAsDataURL(file); read.onload = function() { var url = read.result; if(fileType.indexOf("audio/") != -1){ var showdata = new Audio(); showdata.controls = true; }else if(fileType.indexOf("image/") != -1){ var showdata = new Image(); }else if(fileType.indexOf("video/") != -1){ var showdata = document.createElement("video"); showdata.controls = true; } showdata.src = url; document.getElementById("viewbox").appendChild(showdata); }; } </script>
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《蓝叶》。
- 本文网址:https://lanye.org/web/1050.html
- 上篇文章:emlog如何判断首页(自定义首页方法)
- 下篇文章:蓝叶分享自动生成短网址的php代码(tinyurl短网址自动生成代码)