jQuery 实现图片上传预览 + 大图预览组件封装实战

1先给预览框设置监听点击事件当点击预览框时触发事件判断定义的全局变量是否有图片没有图片时显示显示系统图片选择器2: 渲染图片监听 change 事件当 input 发生改变时触发先获取第一张图片判断是否是图片不是图片做出弹窗提示中断循环调用图片上传接口将图片传过去拼接域名和图片地址将拼接好的图片传入全局变量中使用 html 动态拼接预览框3设置当鼠标移入预览框时触发监听 mouseenten 鼠标事件判断全局变量中是否有图片有图片显示遮罩层当鼠标溢出时触发监听 mouseleave 事件隐藏遮罩层。点击去蓝是触发监听点击事件将图片地址传给预览框进行预览点击删除时清空全局变量中的图片地址阻止事件冒泡再重新拼接默认图片图片预览1 对象封装用于调用里面定义一个参数用于启动事件open 调用外部传入的图片地址先判断有没有图片再判断元素是否存在没问题将图片传到遮罩层中显示图片close 隐藏遮罩层清空图片地址绑定事件保存当前对象指向点击图片时获取图片地址将图片传进弹窗中点击遮罩层时关闭预览效果