FileReader -- 图片预览问题
封面:
<div>
<div id="showLiveCoverImg" style="height:128px;width:228px;border:#707070 solid 1px;float:left">
<img id="live_cover_image_id" alt="" src="" style="width: 100%;height:100%;">//用于展示图片
</div>
<div style="width:60px;height:128px;float:left;text-align:center;position:relative;">
<a class="table-btn-auto" style="position:absolute;bottom:0;right:0;" οnclick="uploadImg();">浏览</a>
</div>
<div style="width:10px;height:128px;float:left;text-align:right;position:relative;">
<span style="position:absolute;bottom:0;right:0" class="required">*</span>
</div>
<div style="height:30px;display:none">
<input class="ipt-e" id = "live_image_file" name="coverImg" type="file" class="ipt-e u-readonly">//用于上传图片
</div>
</div>
js方法:
function uploadImg(){
$("#live_image_file").click(function (){
//图片预览
if(typeof FileReader==='undefined'){
$("#showLiveCoverImg").html("抱歉,你的浏览器不支持 FileReader");
$("#live_image_file").attr('disabled',true);
}else{
//绑定change改变文本值为文件路径
$("#live_image_file").bind('change',function (){
var file = this.files[0]; //获取file对象
//判断file的类型是不是图片类型
var fileType = file.type;
if(fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg"){
Box.message({
content: "上传图片必须为jpg格式",
type:"warning",
});
$("#live_image_file").val("");
return false;
}
var reader = new FileReader(); //声明一个FileReader实例
reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件
//最后在onload事件中,获取到成功读取的文件内容,并以插入一个img节点的方式显示选中的图片
reader.onloadend = function(e){
var imageObj = document.getElementById("live_cover_image_id");
imageObj.onload = function(){
var img = new Image();
img.src = this.result;
var WidthHeight=9/16;//设置宽高比
if(img.height/img.width != WidthHeight){
Box.message({
content: "上传图片宽高比例必须为16/9",
type:"warning",
});
document.getElementById("live_cover_image_id").src = "";
$("#live_image_file").val("");
return false;
}
};
document.getElementById("live_cover_image_id").src = this.result;
};
});
}
});
}
FileReader -- 图片预览问题相关推荐
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一 ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- Javascript 本地图片预览
IE 的本地图片预览,使用 "file://localhost/"+file.value 的形式实现.或者使用 图片滤镜 来实现: Chrome 和 FireFox 浏览器,使用 ...
- HTML5 实现图片预览和查看原图
html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码.在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地 ...
- 图片预览(适用于IE6,9,10,Firefox)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- JS魔法堂之实战:纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的 onchange事件,一旦更改路径则将图片上传至 ...
- js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
//js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 <!DOCTYPE html> <html xmlns="http: ...
- html5 预览图片原理,html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
最新文章
- CSS之关系选择器(子元素、后代、兄弟选择器)
- 每天学习python 30分钟 -了解python - 看懂#!/usr/bin/python
- [专栏目录]-Crypto学习笔记目录
- oracle 删除表从回收站恢复
- ThinkPHP- 3.1
- 大数据技术 学习之旅_为什么聚焦是您数据科学之旅的关键
- MySQL数据以全量和增量方式,向ES搜索引擎同步流程
- bash 别名_Linux的10个方便的Bash别名
- Tensorflow训练和预测中的BN层的坑(转载)
- 缓存jQuery对象来提高性能
- 在win10系统下安装ubuntu17.10以及基本配置
- 打开文件、网页、文件夹等
- JVM调优总结-调优方法
- interview-db
- 备战数学建模41-蒙特卡罗模拟(攻坚战5)
- 如何使Tello无人机能够通过Python进行条形码扫描?
- matlab 中继选择,全双工中继选择系统的蒙特卡洛仿真
- CSS如何将段落的首行缩进两个字符(图文详解)
- 美的置业不能停:何享健的号子与郝恒乐的纤绳
- SVN:One or more files are in a conflicted state
热门文章
- 多波段影像 tif转为jpg(png)
- TexturePacker的用法
- [概念]医学图像分割中常用的Loss function(损失函数) + 从loss处理图像分割中类别极度不均衡
- java类加载机制、类加载器、自定义类加载器
- 计算机毕业设计Java学校食堂管理(源码+系统+mysql数据库+lw文档)
- PL\SQL破解版 ,带注册码,免费,不要积分,亲测
- Visual Studio 2013安装使用方法
- linux搭建网站教程详解
- 微机原理与接口技术的基础知识
- 林园:为2009年培育“种子”