位置: 编程技术 - 正文

js实现纯前端的图片预览(html&js+前端)

编辑:rootadmin

推荐整理分享js实现纯前端的图片预览(html&js+前端),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端js代码规范,js写前端页面,js写前端页面,前端js代码规范,js写前端页面,javascript前端开发教程,js实现纯前端的输入,js实现纯前端的输入,内容如对您有帮助,希望把文章链接给更多的朋友!

图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上。先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了。

偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅。

一、准备功夫1──FileReader                        

FileReader是HTML5的新特性,用于读取Blob和File类型的数据。具体的用法如下:

(1). 构造方式

var fr = new FileReader();(2). 属性

readyState:类型为unsigned short,FileReader实例的当前状态,(EMPTY——0,还没有加载任何数据;LOADING——1,数据正在加载;DONE——2,已完成全部的读取请求),只读。

result:读取到的文件内容,只读。

error:类型为DOMError,表示在读取文件时发生的错误,只读。

(3). 方法

abort():中止读取操作,并将readyState设置为DONE。当没有执行读取操作时,调用该方法会抛DOM_FILE_ABORT_ERR异常。

readAsArrayBuffer(Blob blob):读取数据,result属性被设置为ArrayBuffer类型

readAsText(Blob blob [, encoding='utf-8']):读取数据,result属性被设置为String类型

readAsBinaryString(Blob blob):读取数据,result属性被设置为原始二进制数据

readAsDataURL(Blob blob):读取数据,result属性被设置为Data URI Scheme形式(具体请浏览《JS魔法堂:Data URI Scheme介绍》)

(4).事件

onload:读取数据成功后触发

onerror:读取数据时抛异常时触发

onloadstart:读取数据前触发

onloadend:读取数据后触发,在onload或onerror后触发

onabort:中止读取后触发

js实现纯前端的图片预览(html&js+前端)

onprogress:读取过程中周期性触发

(5). 浏览器支持

FF3.6+,Chrome7+,IE+

二、准备功夫2──DXImageTransform.Microsoft.AlphaImageLoader滤镜    

(1). 作用:主要作用是对图片进行透明处理(IE5.5~6并不支持透明的png)

(2). 样式中的使用方式

(3). JS中的使用方式

(4). 属性

enabled:可选项,设置滤镜是否激活。值范围true(默认),false

sizingMethod:可选项,设置滤镜作用的图片在容器边界内的显示方式,值范围crop(剪切图片以适应容器尺寸),image(默认值,增大或缩小容器尺寸以适应图片的尺寸),scale(缩放图片以适应容器尺寸)

src:必填项,使用绝对或相对URL指向背景图片。当URL为用户计算机本地地址时有效, 而img元素的src为用户计算机本地地址时会抛不允许访问本地文件系统的异常。

三、实现                                

接下来我们就利用FileReader的readAsDataURL来获取Data URI Scheme来实现图片预览的功能,而IE5.5~9我们就使用滤镜DXImageTransform.Microsoft.AlphaImageLoader来作降级处理。

html片断:

js片断:

四、坑                                  

由于IE作了安全方面的考虑,使得在input[type=file]元素上通过value、outerHTML和getAttribute的方式都无法获取用户所选文件的真实地址,只能获取到 C:fakepath文件名称 。因此假如使用IE,但文本模式却设置为以下,那就没木有办法实现图片预览了。

解决办法1──在head标签下加入这句: <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 。这样就可以告诉IE,默认使用当前IE的最高版本解析、渲染网页了。

解决办法2──采用 document.selection.createRangeColleciton() 获取真实地址,具体操作如下:

五、补充:使用window.URL.createObjectURL代替FileReader      

通过FileReader的readAsDataURL方法获取的Data URI Scheme会生成一串很长的base字符串,若图片较大那么字符串则更长,若页面出现reflow时则会导致性能下降。解决方案如下:

1. 预览的img标签使用绝对定位,从而脱离正常文档流,那么就与文档的其他元素无关了,而reflow时则不会影响性能。

2. 采用 window.URL.createObjectURL(Blob blob) 生成数据链接。

注意: window.URL.createObjectURL 生成的数据链接是独占内存的,因此若不时用时需要调用 window.URL.revokeObjectURL(DOMString objUrl) 来释放内存。在刷新页面时,也会自动释放内容。

标签: html&js+前端

本文链接地址:https://www.jiuchutong.com/biancheng/373366.html 转载请保留说明!

上一篇:简介BootStrap model弹出框的使用(简介英文)

下一篇:JavaScript弹窗基础篇(javascript弹窗函数)

  • 银行转账支付计入什么科目
  • 金税三期个人所得税税率
  • 其他收益科目代码
  • 金税盘查发票明细
  • 小规模纳税人每季度超过30万交税
  • 企业没有进项发票又开出很多发票
  • 个人取得哪项收入需要缴纳个人所得税
  • 转登记为小规模纳税人政策
  • 建筑施工企业的法定代表人对本企业的安全生产负责
  • 哪些补贴可以不交个税
  • 企业采购一般应包括什么
  • 小微企业免税销售额填含税还是不含税
  • 购买面粉的税率是多少
  • 同一地级行政区指什么
  • 特定行业如何界定
  • 亏损企业所得税汇算清缴怎么做
  • 代销协议书
  • 单位代收员工退休金会计分录
  • 免抵退税金额是啥意思
  • 一般纳税人小微企业认定标准
  • 简易办法计税销售额如何填写
  • 物流公司运费的会计分录
  • 增加资产的会计科目
  • 企业取得的利息收入 用什么科目
  • 什么时候不能计入开办费
  • packethsvc.exe - packethsvc是什么进程 有什么用
  • 建筑行业怎么做职业生涯规划
  • php常用的设计模式在开发中的实例
  • 收到现金股利或债券利息时会计分录
  • 调整固定资产折旧年限,折旧额的变化
  • pytorch复制模型
  • php获取文章内容图片
  • 金融企业呆账核销管理办法
  • 激光点图片
  • php htmlentities()函数的定义和用法
  • 神经网络模型是干嘛的
  • 修改命令的快捷键
  • 针对多用户实现什么功能
  • 会计账的银行存款与银行存款不一致 是属于账账不符吗
  • 农产品收购发票是普票还是专票
  • mysql查询缓慢
  • mongodb部署安装
  • 企业电子发票重开流程
  • 物业公司收取的电费怎么确认收入
  • 物业公司代收水费合理吗
  • 承兑汇票贴现计算器下载
  • 应交税费其他收入会计分录
  • 银行收到客户货款会计分录
  • 待摊费用会计处理
  • 广告费支出的税种有哪些
  • 以下各项不属于肝郁气滞证表现的是
  • 购电脑怎么入账
  • 小规模公司购买汽车如何抵税
  • mysql必知必会读后感2000字
  • windows ssh-keygen
  • win7 64位系统关机按钮不见了怎么找回 win7关机按钮设置步骤
  • mac怎么一键关机
  • linux文本处理常用命令
  • 硬盘安装在机箱内,属于主机的组成部分
  • smartagt.exe - smartagt是什么进程 什么文件
  • 自动批处理文件的名字是什么
  • xp输入法图标不显示图片
  • linux中sed命令
  • win7怎么调图片大小
  • cocos2d怎么用
  • node.js gui
  • python num怎么用
  • jqueryon事件
  • python文件管理系统难点总结
  • 用python学算法
  • js函数全局变量
  • JQuery给select添加/删除节点的实现代码
  • 河南电子税务局开票流程
  • 开出去的专用发票存根怎么处理的
  • 上海税务网上报税
  • 组织创新包括哪些类型
  • 大连市国家税务局官网登录
  • 吉林税务发票自动查询系统网
  • 点击正式申报前怎么操作
  • 地方公安局归谁管
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设