博客
关于我
js图片预览插件,不涉及上传
阅读量:798 次
发布时间:2023-04-16

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

图片上传本地预览插件是一个实用且高效的工具,能够帮助开发者快速实现图片上传功能。以下是该插件的使用方法和代码示例。


插件简介

该插件支持跨浏览器兼容(IE、Chrome、Firefox),但不适用于Safari。插件的主要功能包括:

  • 图片预览功能:支持本地上传并实时预览图片。
  • 多实例支持:可以创建多个独立的图片上传组件。
  • 自定义配置:支持设置图片类型、预览尺寸、错误提示等参数。

  • 使用方法

    HTML结构示例:

        图片上传预览    

    调用方法:

    new uploadPreview({    UpBtn: "up_img1",  // 文件选择器的ID    DivShow: "imgdiv1",  // 预览区域的ID    ImgShow: "imgShow1", // 预览图片的ID    Width: 200,         // 预览宽度,默认为100    Height: 200,        // 预览高度,默认为100    ImgType: ["jpg", "png"], // 支持的图片类型    callback: function() { console.log("图片上传完成!"); } // 上传成功回调});

    插件配置参数

  • UpBtn:文件选择器的ID。
  • DivShow:用于显示图片预览的容器ID。
  • ImgShow:用于显示图片的实际显示区域ID。
  • Width:预览图片的宽度,单位为px,默认为100。
  • Height:预览图片的高度,单位为px,默认为100。
  • ImgType:支持的图片文件类型,格式为数组,例如["jpg", "png"]。
  • callback:图片上传成功后的回调函数。

  • 注意事项

  • 图片类型验证:插件会自动检查图片类型是否为支持格式,支持格式包括:gif、jpeg、jpg、bmp、png。
  • IE浏览器支持:在IE浏览器中,插件采用DXImageTransform技术实现预览,可能会影响页面性能。
  • 回调功能:可以通过callback参数自定义处理图片上传完成后的逻辑。

  • 版本更新

    v1.4

    • 修复了回调功能的异常,确保callback在所有浏览器中都能正常工作。

    v1.3

    • 修复了多层级框架获取路径的BUG。
    • 删除了对jQuery插件的依赖,使插件更加轻量化。

    工作原理

    插件通过绑定文件选择器的onchange事件,触发图片预览逻辑。具体实现包括:

  • 文件类型验证:使用正则表达式检查图片类型。
  • URL获取:根据浏览器类型(IE、Chrome、Firefox)获取文件的URL。
  • 图片预览:将获取到的URL设置为目标图片标签的src属性。
  • 自定义回调:调用用户定义的callback函数,处理上传成功后的逻辑。

  • 如需进一步了解插件功能或使用示例,可以访问插件官网

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

    你可能感兴趣的文章
    MySQL InnoDB引擎的锁机制详解
    查看>>
    Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
    查看>>
    mysql InnoDB数据存储引擎 的B+树索引原理
    查看>>
    mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值?
    查看>>
    mysql problems
    查看>>
    MySQL replace函数替换字符串语句的用法(mysql字符串替换)
    查看>>
    mysql workbench6.3.5_MySQL Workbench
    查看>>
    MySQL Workbench安装教程以及菜单汉化
    查看>>
    MySQL Xtrabackup 安装、备份、恢复
    查看>>
    mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes
    查看>>
    MySQL _ MySQL常用操作
    查看>>
    MySQL – 导出数据成csv
    查看>>
    MySQL —— 在CentOS9下安装MySQL
    查看>>
    mysql 不区分大小写
    查看>>
    mysql 两列互转
    查看>>
    MySQL 中开启二进制日志(Binlog)
    查看>>
    MySQL 中文问题
    查看>>
    MySQL 中日志的面试题总结
    查看>>
    MySQL 中随机抽样:order by rand limit 的替代方案
    查看>>
    MySQL 为什么需要两阶段提交?
    查看>>