现在位置:首页 > 网站设计 > input显示直接选择的图片音乐视频文件(javascript预览图片音乐视频代码)

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

作者:蓝叶 分类:网站设计 时间:2022-12-09 浏览:968

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>

免责声明:

本页网址:点击复制分享给朋友吧!

本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!

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

清空信息
关闭评论
音乐欣赏
返回顶部