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 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM