头闻号

深圳市亚美鑫塑胶制品有限公司

广告、展览器材|包装产品加工|家用电器加工|托盘|塑料加工|橡胶加工

首页 > 新闻中心 > 科技常识:h5本地预览上传的图片或视频
科技常识:h5本地预览上传的图片或视频
发布时间:2024-12-23 22:14:31        浏览次数:10        返回列表

今天小编跟大家讲解下有关h5本地预览上传的图片或视频 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关h5本地预览上传的图片或视频 的相关资料,希望小伙伴们看了有所帮助。

通过<input id="input"type="file"onchange="changeFile()"> 中的change事件 拿到的file不能直接在本地预览选择的图片或者视频,可以通过以下两种方式预览本地图片,不用上传到服务器就可以本地预览。

createObjectURL

这种方式生成的文件地址可以预览图片和视频

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input id="inputFile"onchange="change();"type="file"><img id="img"src="http://www.aidi.net.cn/article/detial/4425/"><script> function change() { console.log(111); var uploadUrl = getFileUrl('inputFile'); var img =document.getElementById('img'); img.src = uploadUrl; } function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE url = document.getElementById(sourceId).value; } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; }</script></body></html>

本地预览的视频地址最终结果 blob格式

FileReadervar reader = new FileReader();reader.onload =function(e){ aImg.src = e.target.result;}reader.readAsDataURL(file); // file是指选择的文件 files[0]

本地预览的视频地址最终结果 base64格式

来源:爱蒂网