上传选择文件预览文件前端js代码（预览文件javascript代码）

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

<!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>