dropify,不错的图片上传预览插件
2024-08-31 12:59:31
引言
传统的图片上传,很丑。点击选择之后,还无法预览。
有一种方案是传到服务器,然后返回地址,然后显示,比较麻烦。
用这个dropify,就可以解决之歌问题。
看效果
用法
1.引入文件,需要jquery支持。
<link rel="stylesheet" href="__PLUGIN__/dropify/css/dropify.css">
<script type="text/javascript" src="__PLUGIN__/dropify/js/dropify.js"></script>
2.给file表单添加属性
<input name="img" type="file" class="dropify" id="input-file-events" data-default-file="{$info.img|default=''}" data-allowed-file-extensions="jpg png jpeg gif" required>
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://github.com/JeremyFagis/dropify
最新文章
- NFS指定端口
- Python~win32com~Excel
- Linq学习总结1--参考Linq技术详解
- SQL SERVER 2008 R2 还原数据库3154错误
- Java团队项目总结
- Linux 总结1
- 杭电ACM2011--	多项式求和
- C#线程总结
- WPF 显示模态窗口和窗体
- C++ 让 Win32 Console Application 程序后台运行
- 浅谈vertical-align
- 并发编程(三):从AQS到CountDownLatch与ReentrantLock
- Java生成条码二维码
- TMS320DM642学习----第六篇(CCS中.dat文件类型详解)
- 解决Spark filter过滤条件中使用>;=或<;=时不识别的问题
- 05_ssm基础(一)之mybatis简单使用
- Python人工智能之图片识别,Python3一行代码实现图片文字识别
- Identical Binary Tree
- Cognos11第三方权限认证之OpenDJ
- 使用bat批处理文件备份postgresql数据库
热门文章
- HDU-5025 Saving Tang Monk 广度搜索 状态压缩
- windows下安装redis以及测试 Window 下安装
- tar 命令man说明
- c++常见操作的模板
- [luogu]P4312 [COCI 2009] OTOCI / 极地旅行社(LCT)
- Java - 多线程Callable、Executors、Future
- lightoj--1155--	Power Transmission	(最大流拆点)
- Windows下mnist数据集caffemodel分类模型训练及测试
- Mysql常见更改密码方法
- Filenames and paths