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);

};

}