博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
dropify,不错的图片上传预览插件
阅读量:5127 次
发布时间:2019-06-13

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

引言

传统的图片上传,很丑。点击选择之后,还无法预览。

有一种方案是传到服务器,然后返回地址,然后显示,比较麻烦。
用这个dropify,就可以解决之歌问题。

看效果

422101-20170909171743913-2014892007.png

422101-20170909171748804-1096654004.png

422101-20170909171753804-1444898685.png

422101-20170909171758069-593173044.png

用法

1.引入文件,需要jquery支持。

2.给file表单添加属性

3.给file添加事件

// Used events        var drEvent = $('#input-file-events').dropify();        drEvent.on('dropify.beforeClear', function(event, element) {            return confirm("确定删除 \"" + element.file.name + "\" ?");        });        drEvent.on('dropify.afterClear', function(event, element) {            layer.msg('删除成功');        });

搞定,剩下的就是表单提交的工作了。

github地址

转载于:https://www.cnblogs.com/jiqing9006/p/7498759.html

你可能感兴趣的文章
MVC中使用Action全局过滤器出现:网页无法正常运作 将您重定向的次数过多。解决办法...
查看>>
hibernate06--参数的绑定
查看>>
调用 js 生成图片二维码
查看>>
页面前端的水有多深?再议页面开发
查看>>
将一般的数值转换为金额格式(分隔千分位和自动增加小数点)
查看>>
山区建小学(区间dp+前缀和+预处理)
查看>>
Linux学习之挂载操作
查看>>
P4091 [HEOI2016/TJOI2016]求和
查看>>
Script to Collect RAC Diagnostic Information (racdiag.sql)
查看>>
什么是Joint Escalation Team?
查看>>
Nodejs学习笔记(十四)—Mongoose介绍和入门
查看>>
数据链路层之服务与成帧
查看>>
TensorFlow设置GPU占用量
查看>>
oracle默认用户名及密码
查看>>
notifyDataSetChanged() 动态更新ListView
查看>>
Jquery和一些Html控件
查看>>
图像处理10 RCNN
查看>>
使用PreApplicationStartMethodAttribute
查看>>
【Active入门-2】ActiveMQ学习-生产者与消费者
查看>>
安装Android SDK buildtool 23.0.1仍旧报错
查看>>