博客
关于我
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 字段类型类型
    查看>>
    MySQL 字符串截取函数,字段截取,字符串截取
    查看>>
    MySQL 存储引擎
    查看>>
    mysql 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
    查看>>
    MySQL 存储过程参数:in、out、inout
    查看>>
    mysql 存储过程每隔一段时间执行一次
    查看>>
    mysql 存在update不存在insert
    查看>>
    Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
    查看>>
    Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
    查看>>
    Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
    查看>>
    Mysql 学习总结(89)—— Mysql 库表容量统计
    查看>>
    mysql 实现主从复制/主从同步
    查看>>
    mysql 审核_审核MySQL数据库上的登录
    查看>>
    mysql 导入 sql 文件时 ERROR 1046 (3D000) no database selected 错误的解决
    查看>>
    mysql 导入导出大文件
    查看>>
    MySQL 导出数据
    查看>>
    mysql 将null转代为0
    查看>>
    mysql 常用
    查看>>
    MySQL 常用列类型
    查看>>
    mysql 常用命令
    查看>>