js图片预览插件，不涉及上传-白红宇

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/

你可能感兴趣的文章