博客
关于我
原生js之图片预览的封装
阅读量:201 次
发布时间:2019-02-28

本文共 682 字,大约阅读时间需要 2 分钟。

图片预览

_this:input[file]对象

_thisNext:下一个要操作的DOM对象

cb:回调函数

                    function changeImg(_this, _thisNext, cb) {                var reader = new FileReader();                reader.readAsDataURL(_this.files[0]);                reader.onload = function(e) {                    _this.nextSibling.src = e.target.result;                    if (cb) {                        cb(_thisNext);                    }                };            }            

技术说明:

  • 该函数通过DOM事件处理,实现文件读取与图片展示功能
  • 函数参数包括当前文件输入框对象(_this)、下一个需要操作的DOM对象(_thisNext)以及回调函数(cb)
  • 当文件读取完成后,会自动设置下一个DOM对象的src属性
  • 支持回调函数的调用,允许外部定义具体操作逻辑

转载地址:http://lohi.baihongyu.com/

你可能感兴趣的文章
Oracle安装、Navicat for Oracle、JDBCl连接、获取表结构
查看>>
Oracle安装与远程连接配置(附Oracle安装包)
查看>>
Oracle官方推荐的性能测试工具!简单、精准又直观!
查看>>
ORACLE客户端连接
查看>>
oracle密码包含,【扫盲】Oracle用户密码含有特殊字符的处理办法
查看>>
ubuntu完美搭建git服务器【转】
查看>>
Oracle导入导出命令
查看>>
oracle导出
查看>>
oracle常用SQL——创建用户、表空间、授权(12C)
查看>>
Oracle常用函数整理
查看>>
Oracle常用查询语句
查看>>
oracle常用的一些sql命令
查看>>
oracle常用知识,Oracle常用知识点记录
查看>>
Oracle常用语句语法汇总
查看>>
oracle常见操作
查看>>
oracle常见错误
查看>>
Oracle并行
查看>>
oracle快速创建可用用户
查看>>
oracle技能综述,ORACLE要点综述(之一:基本SELECT语句)-数据库专栏,ORACLE
查看>>
Oracle收购DataScience.com扩展云平台分析能力
查看>>