FileReader是前端进行文件处理的一个重要的Api，特别是在对图片的处理上，如果你想知道图片的处理原理，你就永远不可能绕过它。
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title></title>
<style type=\"text/css\">
.file-ipt{position: absolute;left:0;top: 0;opacity: 0;width: 50px;height: 25px;} //这里透明化了input框，然后绝对定位在按钮上了
.btn{width: 50px;height: 25px; background-color: skyblue;color: white;margin-right: 80px;border: none;border-radius: 10px;font-size: 8px;}
</style>
</head>
<body>
<button class=\"btn\">图片</button>
<input type=\"file\" id=\"file\" accept=\"image/jpg,imgae/jpeg,image/png\" class=\"file-ipt\" onchange=\"insertimg(this);\"><br>
<img src=\"\" id=\"img1\" alt=\"\">
<script language=\"javascript\">
function insertimg(img){
var rd=new FileReader();
files=img.files[0];
var filetype=files.type.slice(6,10);
if(filetype!=\'jpg\'&&filetype!=\'jpeg\'&&filetype!=\'png\'){
alert(\'仅支持png,jpeg,jpg图片格式\');
return;
}else{
rd.readAsDataURL(files);
rd.onloadend=function(e){
document.getElementById(\'img1\').src=e.target.result;
document.getElementById(\'img1\').style.width=\"300px\";
document.getElementById(\'img1\').style.height=\"auto\";
};
}
}
</script>
</body>
</html>
知识点补充:JS input file图片上传预览效果
首先，可以先了解file 和FileReader 的API，在选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。所有type属性(attribute)为file的<input>元素都有一个files属性，用来存储用户所选择的文件。files有一个length属性和item方法，我们可以通过files[index]或者files.item(index)获取我们选择的file对象。可以通过change事件监听input file输入完成事件。
html代码：
<ul class=\"crgoods_uploadUl clearfix\">
<li><img src=\"img/product1.jpg\"></li>
<li><img src=\"img/product1.jpg\"></li>
<li class=\"add\"><i>+</i>最多20张<input type=\"file\" class=\"liAdd_flie\" οnchange=\"liUploadImg(this)\"></li>
</ul>
js代码：
//商品相册图片上传预览
function liUploadImg(file){
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
// imgUpload.src = evt.target.result;
$(\'.crgoods_uploadUl li.add\').before(\'<li><img src=\"\'+evt.target.result+\'\"></li>\');
}
reader.readAsDataURL(file.files[0]);
}else{
var sFilter=\'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"\';
file.select();
var src = document.selection.createRange().text;
imgUpload.filters.item(\'DXImageTransform.Microsoft.AlphaImageLoader\').src = src;
}
}
另外，详细API可以参考https://segmentfault.com/a/1190000006600936
示例如下：
© 版权声明
THE END
暂无评论内容