本文主要是介绍实现图片、音视频文件的上传预览，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近在做关于图片和音视频的上传，上传使用的是stream上穿插件，很好用，但是上传之前需要对上传的图片和音视频进行预览，来确定是否删除某些上传文件，先看代码：
- stream上传插件地址：http://www.twinkling.cn/（很好用的上传插件）
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><script>function fileSelected(file, type) {var name = file.name;console.log(name);var path;if(type == "img") {if(document.all) // IE{// ele.select();path = document.selection.createRange().text;document.getElementById("temp").innerHTML = "";document.getElementById("temp").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" +path + "\")"; // 使用滤镜效果} else // FF{path = URL.createObjectURL(file);document.getElementById("temp").src = path;}}if(type == "video") {path = URL.createObjectURL(file);// Todo:视频插件创建错误document.getElementById("video1").src = path;var myVideo = document.getElementById("video1");//音量为20%myVideo.volume = 0.2;/*myVideo.addEventListener("loadedmetadata", function() {initPlayUrl(myVideo.duration);}, false);myVideo.addEventListener("loadedmetadata", function() {drawVolumeSlider();}, false);return true;*/}}function choiceImg(e) {fileSelected(e.files[0], "img");}function choiceMusicAndVideo(e) {fileSelected(e.files[0], "video");}</script><body><img src="img/123.jpg" id="temp" style="width: 300px;height: 417px;" /><video width="400" height="300" id="video1" autoplay="autoplay" controls="controls" src="img/123.flv"></video><input type="file" width="200px" onchange="choiceImg(this)" value="选择图片" /><input type="file" width="200px" onchange="choiceMusicAndVideo(this)" value="选择音视频" /></body></html>说明：
当input的onchange事件触发的时候，获取选中的文件——this.files[0]
通过使用URL.createObjectURL(file)来生成一个临时的网络路径，最为上传文件的src。
初始化页面：
选中后页面：
这篇关于实现图片、音视频文件的上传预览的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
