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

    你可能感兴趣的文章