filedrop.js 文件拖放或选择上传插件-BFW插件库

filedrop.js 文件拖放或选择上传插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["filedrop", "filedrop"], function() {
                var options = {
                    iframe: {
                        url: 'upload.php'
                    }};
                var zone = new FileDrop('zbasic', options);

                zone.event('send', function (files) {
                    files.each(function (file) {
                        file.event('done', function (xhr) {
                            alert('Done uploading ' + this.name + ',' +
                                ' response:\n\n' + xhr.responseText);
                        });

                        file.event('error', function (e, xhr) {
                            alert('Error uploading ' + this.name + ': ' +
                                xhr.status + ', ' + xhr.statusText);
                        });

                        file.sendTo('upload.php');
                    });
                });

                // <iframe> uploads are special - handle them.
                zone.event('iframeDone', function (xhr) {
                    alert('Done uploading via <iframe>, response:\n\n' + xhr.responseText);
                });

                // Toggle multiple file selection in the File Open dialog.
                fd.addEvent(fd.byID('zbasicm'), 'change', function (e) {
                    zone.multiple((e.currentTarget || e.srcElement).checked);
                });
            });
        });
    </script>
</head>
<body style="background:white;">
    <fieldset id="zbasic">
        <legend>拖一个文件进来</legend>
        <p>
            或者选择文件
        </p>

        <p style="position: relative; z-index: 1">
            <input type="checkbox" id="zbasicm">

            <label for="zbasicm">
               容许多文件上传
            </label>
        </p>
    </fieldset>
</body>
</html>

更多特效看官网 http://filedropjs.org

filedrop.js 文件拖放或选择上传插件

网友评论0

plupload.js

dropzone.js

webuploader.js

jquery.imageuploader.js

filedrop.js

jquery.fcup.js