分享模板插件精品好资源
现在位置:首页 > 网站设计 > 上传选择文件预览文件前端js代码(预览文件javascript代码)

上传选择文件预览文件前端js代码(预览文件javascript代码)

作者:蓝叶 分类:网站设计 时间:2024-01-22 浏览:70

在前端的世界里,我们有时需要一种魔法般的体验,让用户在上传文件之前就能预览其内容。这不,我为你带来了这样的一段代码。它就像一个魔法镜,能够让你预览音乐、图片和视频文件。你只需简单复制以下javascript代码,粘贴到你需要的地方,然后这个魔法镜就会为你工作。请注意,这只是一个演示例子,你可以根据自己的需求进行修改和优化。现在,让我们一起揭开它的神秘面纱吧!

上传选择文件预览文件前端js代码1.jpg

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>选择文件预览文件内容</title>
<style>
*{margin:0;border:0;padding:0; box-sizing:border-box}
.wrap{width: 600px;margin: 60px auto 0;background: #fff;border: 1px solid #ccc;padding: 10px;border-radius: 6px;}
.wrap input{width:100%;}
#viewbox{width:600px;margin:10px auto 0;}
#viewbox img,#viewbox audio,#viewbox video{width:100%;}
</style>
</head>
<body>
<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>
</body>
</html>

免责声明:

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

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

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

清空信息
关闭评论