通过<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="">
<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格式
FileReader
var reader = new FileReader();
reader.onload =function(e){
aImg.src = e.target.result;
}
reader.readAsDataURL(file); // file是指选择的文件 files[0]本地预览的视频地址最终结果 base64格式
原生Js对文件类型的判断，判断文件是图片，视频等格式
在我们开发中，会遇到这样的场景：1.服务器返回Json数据，根据数据类型来显示是图片还是视频。2.前端上传文件，需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型
前端图片懒加载的实现，采用Lazy Load 图片延迟加载提高用户体验
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
web前端图片加载优化，从图片模糊到清晰的实现过程
在网页图片显示的时候，会发现许多网站采用了先模糊，然后在慢慢清晰的过程，这样的加载用户体验是比较好的，那么如何实现呐？默认加载2张图片，一张缩略图，一张原图，当打开网页的时候默认只显示缩略图
lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件
当你的网站使用了大量图片时候，如果一次性全部加载，那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题，它可以实现图片的延迟加载【懒加载】
js实现图片局部放大效果
图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。
网站图片优化的重要性与技巧方案
网站图片优化技巧：1、图片名包括关键词，2、Alt标签包括关键词，3、图片周边文本包括关键词，4、GLF和JPGE图画优化，5、在图片链接中运用锚文本关键字
css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果
前端需要显示矩形的缩略图，接口返回的图片尺寸大小不一，宽高不相等，需要前端来处理并显示成正方形，类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢？
原生js 生成海报图_利用canvas合成图片的实现方法
目前浏览器对html5的支持越来越好，我们现在不用服务器端，直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图
网页中默认图片的几种解决方式
现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢？下面给出几种方式
h5移动端禁止长按图片保存
在移动端访问H5页面的时候，长按图片就会把图片保存起来，为了能够让用户体验更好一些，我们需要长按的时候也不保存图片。那该如何实现呢？下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!