蓝叶

蓝叶分享emlog模版、emlog插件、zblog插件、zblog模版、帝国模版、绿色软件、蓝叶原创作品等众多精选好资源。
现在位置:首页 > 网站设计 > input显示直接选择的图片音乐视频文件(javascript预览图片音乐视频代码)

input显示直接选择的图片音乐视频文件(javascript预览图片音乐视频代码)

蓝叶    网站设计    2022-12-09    294    0评论    

inpu标签上传文件时,想要预览当前选择的图片音乐视频等文件,我们需要使用javascript代码来实现,读取到当前选择的文件数据,然后判断类型,再创建对象和dom,最后写入到设置好的div元素中,即可实现input显示直接选择的图片音乐视频文件的功能,详细的javascript预览图片音乐视频代码请见下方,可以复制后直接使用。

input显示直接选择的图片音乐视频文件.png

<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>
评论一下 分享本文 赞助蓝叶

赞助蓝叶X

扫码赞助蓝叶
联系站长
蓝叶
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
加载中....
快捷导航 返回顶部
付费服务
音乐欣赏
友情链接
保存桌面
给我留言
返回顶部