h5上传视频并预览 php,h5本地预览上传的图片或视频

通过 中的change事件 拿到的file不能直接在本地预览选择的图片或者视频，可以通过以下两种方式预览本地图片，不用上传到服务器就可以本地预览。

createObjectURL

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

Title

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;

}

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

FileReader

var reader = new FileReader();

reader.onload =function(e){

aImg.src = e.target.result;

}

reader.readAsDataURL(file); // file是指选择的文件 files[0]

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

按照前辈们的说法，creatObjectURL可以有更好的性能，或许是浏览器自带接口的原因, 可以处理的更快。