博客
关于我
原生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/

你可能感兴趣的文章
OSG学习:几何对象的绘制(三)——几何元素的存储和几何体的绘制方法
查看>>
OSG学习:几何对象的绘制(二)——简易房屋
查看>>
OSG学习:几何对象的绘制(四)——几何体的更新回调:旋转的线
查看>>
OSG学习:场景图形管理(一)——视图与相机
查看>>
OSG学习:场景图形管理(三)——多视图相机渲染
查看>>
OSG学习:场景图形管理(二)——单窗口多相机渲染
查看>>
OSG学习:场景图形管理(四)——多视图多窗口渲染
查看>>
OSG学习:新建C++/CLI工程并读取模型(C++/CLI)——根据OSG官方示例代码初步理解其方法
查看>>
Sql 随机更新一条数据返回更新数据的ID编号
查看>>
OSG学习:空间变换节点和开关节点示例
查看>>
OSG学习:纹理映射(一)——多重纹理映射
查看>>
OSG学习:纹理映射(七)——聚光灯
查看>>
OSG学习:纹理映射(三)——立方图纹理映射
查看>>
OSG学习:纹理映射(二)——一维/二维/简单立方图纹理映射
查看>>
OSG学习:纹理映射(五)——计算纹理坐标
查看>>
OSG学习:纹理映射(六)——灯光
查看>>
OSG学习:纹理映射(四)——三维纹理映射
查看>>
OSG:从源码看Viewer::run() 一
查看>>
osi 负载均衡
查看>>
OSI七层模型与TCP/IP五层模型(转)
查看>>