[精][网页插件]🚀图文快贴 - 网页插件

最近注意到论坛有虎友发布了图片上传教程，却被部分虎友吐槽步骤繁琐。
实际上大多数虎友并没有压缩图片的相关需求，特此推出一个超快贴图(文)的插件。

1.对于PC虎友来说

早在此之前，我们就可以使用这款剪切板传图插件复制粘贴快速贴图。

为了让PC虎友更快一步，我们支持了拖拽上传，将文本、二进制文件拖拽到输入框，输入框背景会变成灰色，松手，即可完成上传。（小提示：文本类文件不会作为附件上传，而是直接释放到输入框。）

此外，剪切板传图功能也整合了进来，在浏览器内“复制图像”或截图保存到剪切板后按Ctrl+V即可粘贴。（注意直接复制图片文件是粘贴不进来的，如果图片已经被保存为文件，只能拖放粘贴。）

如果你已经放置了之前的剪切板传图插件代码，请删除以避免冲突。

2.对于手机虎友来说

在添加附件的右侧多出一个 ?图文快贴 的按钮，看到那个小火箭了吗？点击一下他，立刻开始选择图片。当完成选图后，将会立即上传。同时你也可以直接拍照上传~

代码如下 enjoy it.

!!!重要使用插件助手的虎友，请删除（屏蔽）下面带【???】的两行代码即可，并在插件中设置为【自动执行】

导入网页插件：🚀图文快贴（当前用户：2，总安装次数：3）

<script>
/**图文拖拽快传插件开始**/
$(function () { // 【???】
    // 粘贴
    document.addEventListener('paste', function (event) {
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        var files = [];
        for (var i=0; i<clipboardData.items.length; i++) {
            var file = clipboardData.items[i];
            if (file.kind === 'file') {
                var file = file.getAsFile();
                if (file) {
                    files.push(file);
                }
            }
        }
        if (files.length > 0) {
            resolveFileList(files);
        }
    });

    // 拖放
    var content = document.getElementById('content');
    if(!content) return '?非帖子页面不继续执行';
    content.ondragover = function (ev) {
        ev.preventDefault();
        this.style.backgroundColor = '#ddd';
    }
    content.ondragleave = function () {
        this.style.backgroundColor = 'inherit';
    }
    content.ondrop = function (ev) {
        this.style.backgroundColor = 'inherit';
        ev.preventDefault();
        resolveFileList(ev.dataTransfer.files);
    }

    // 添加按钮
    var fastUpBtn = document.createElement('input');
    fastUpBtn.id = 'fastUpBtn';
    fastUpBtn.style.display = 'none';
    fastUpBtn.type = 'file';
    fastUpBtn.onchange = function (e) {
        resolveFileList(e.target.files);
    }
    var triggerUpBtn = document.createElement('input');
    triggerUpBtn.style.marginLeft = '4px';
    triggerUpBtn.type = 'button';
    triggerUpBtn.value = '?图文快贴';
    triggerUpBtn.onclick = function () {
        fastUpBtn.click()
    }
    // $("#add_files").after(fastUpBtn).after(triggerUpBtn);
    $("#ubbHelp").before(fastUpBtn).before(triggerUpBtn);

    // 上传文件
    function resolveFileList(files) {
        Toast&&Toast("正在处理数据...")
        Array.from(files).forEach(file => {
            if (file.type.indexOf('text') === 0 || file.name.indexOf('.md') === file.name.length - 3) {
                file.text().then(text => {
                    insertText(content, text)
                });
            } else {
                var fd = new FormData();
                fd.append('file', file);
                $.ajax({
                    type: 'POST',
                    url: '/q.php/bbs.upload.json',
                    data: fd,
                    processData: false,
                    contentType: false
                }).done(function (ret) {
                    fastUpBtn.value = '';
                    console.debug(ret)
                    if (ret.content) {
                        insertText(document.getElementById("content"), ret.content);
                    } else {
                        Toast&&Toast("粘贴失败,请稍后再试\n" + JSON.stringify(ret))
                    }
                });
            }
        })
    }
}); // 【???】

function Toast(msg, duration) {
    console.log(msg)
    // 如果不需要提示框，请删除下面的代码
    duration = isNaN(duration) ? 2000 : duration;
    var m = document.createElement('div');
    m.innerHTML = msg;
    m.style.cssText = "max-width:60%;min-width: 150px;padding:0 14px;min-height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
    document.body.appendChild(m);
    setTimeout(function () {
        var d = 0.5;
        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
        m.style.opacity = '0';
        setTimeout(function () {
            document.body.removeChild(m)
        }, d * 1000);
    }, duration);
    // 如果不需要提示框，请删除上面的代码
}
/**图文拖拽快传插件结束**/
</script>

小米MIX2s(白)