dropify,不错的图片上传预览插件

引言

传统的图片上传，很丑。点击选择之后，还无法预览。
有一种方案是传到服务器，然后返回地址，然后显示，比较麻烦。
用这个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 eventsvar 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

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

dropify,不错的图片上传预览插件相关推荐

图片上传预览的几种方式，了解下？
图片上传预览场景基本处处可见,朋友圈发动态配图,身份验证及头像更新,莫过如斯. 原由最近在研究twitter PC网站的时候,在个人中心的主页,设置个人的背景图的时候,发现twitter有个非常好的 ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
java 图片上传预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...

dropify,不错的图片上传预览插件

引言

看效果

用法

dropify,不错的图片上传预览插件相关推荐

最新文章

热门文章