引言

傳統(tǒng)的圖片上傳，很丑。點擊選擇之后，還無法預(yù)覽。
有一種方案是傳到服務(wù)器，然后返回地址，然后顯示，比較麻煩。
用這個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

轉(zhuǎn)載于:https://www.cnblogs.com/jiqing9006/p/7498759.html

總結(jié)

以上是生活随笔為你收集整理的dropify,不错的图片上传预览插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。