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

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

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

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

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>

评论一下分享本文赞助蓝叶