whatshot[网页插件] 自动上传剪切板中的图片[精简修复版]

@Ta 07-09 19:29 1170点击

介绍

当你的复制对象是一个图片或者剪切板中存在图片,使用 ctrl v 或者鼠标右键粘贴,即可直接上传剪切板中的图片数据到服务器(免去了点击"添加附件"的过程) .( 另安利一个截图工具:https://zh.snipaste.com/ )

源码

<script>
function insertText(obj, str) {  
    if (document.selection) {  
        var sel = document.selection.createRange();  
        sel.text = str;  
    } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {  
        var startPos = obj.selectionStart,  
            endPos = obj.selectionEnd,  
            cursorPos = startPos,  
            tmpStr = obj.value;  
        obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);  
        cursorPos += str.length;  
        obj.selectionStart = obj.selectionEnd = cursorPos;  
    } else {  
        obj.value += str;  
    }  
}
document.addEventListener('paste', function (event) {
    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
    var items = clipboardData.items;
    var fd = new FormData();
    if (items.length === 1) {
        if (items[0].kind === 'file') {
            Toast('检测到粘贴截图操作,正在上传...');
            var file = items[0];
        }
    }else if (items.length === 2) {
        if (items[1].kind === 'file') {
            Toast('检测到粘贴图片操作,正在上传...');
            var file = items[1];
        }
    } else {
        var file = false;
    }
    if (file) {
        var file = file.getAsFile();
        fd.append('file', file);
        $.ajax({
            type: 'POST',
            url: '/q.php/bbs.upload.json',
            data: fd,
            processData: false,
            contentType: false
        }).done(function (ret) {
            console.debug(ret)
            if (ret.content) {
                insertText(document.getElementById("content"), ret.content);
            } else {
                Toast("粘贴失败,请稍后再试\n"+JSON.stringify(ret))
            }
        });
    }
})

function Toast(msg, duration) {
    console.log(msg, duration)
    // 如果不需要提示框,请删除下面的代码
    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>

红米Note4超高配版(银色)

回复列表(16)
  • @Ta / 01-19 22:56

    666
    小米Mix3

  • @Ta / 01-20 02:51

    @水木易安,咋不搞成单独的插件啊,这样就可以直接新建插件了

    -喜欢就啪啪啪啊 表白有什么用- blog:LDXW.TOP
  • @Ta / 07-09 19:30

    @穴儿,单独插件:

    <script>//精简版 
    function insertText(obj, str) {  
        if (document.selection) {  
            var sel = document.selection.createRange();  
            sel.text = str;  
        } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {  
            var startPos = obj.selectionStart,  
                endPos = obj.selectionEnd,  
                cursorPos = startPos,  
                tmpStr = obj.value;  
            obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);  
            cursorPos += str.length;  
            obj.selectionStart = obj.selectionEnd = cursorPos;  
        } else {  
            obj.value += str;  
        }  
    }
    document.addEventListener('paste', function (event) {
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        var items = clipboardData.items;
        var fd = new FormData();
        if (items.length === 1 && items[0].kind === 'file') {
            Toast('检测到粘贴截图操作,正在上传...')
            var file = items[0].getAsFile();
            fd.append('file', file);
            $.ajax({
                type: 'POST',
                url: '/q.php/bbs.upload.json',
                data: fd,
                processData: false,
                contentType: false
            }).done(function (ret) {
                console.debug(ret)
                if (ret.content) {
                    hu60_insert_text(document.getElementById("content"), ret.content);
                } else {
                    Toast("粘贴失败,请稍后再试\n"+JSON.stringify(ret))
                }
            });
        }
    })
    function Toast(msg, duration) {
      console.log(msg,duration)
    }
    </script>
    

    红米Note4超高配版(银色)

  • @Ta / 01-20 10:30
  • @Ta / 01-20 10:59
  • @Ta / 01-20 21:19

    大佬大佬,牛掰牛掰!!!方便多了!
    红米Note7 高配版(黑色)

  • @Ta / 01-21 09:57

    @无道,能用就行 改来改了好几次 我还一直以为我哪里贴错了
    红米Note4超高配版(银色)

  • @Ta / 02-25 19:59


    健健康康

  • 000
    @Ta / 02-29 11:53
    测试成功~ 
  • @Ta / 03-13 18:41

    很好很强大

  • @Ta / 03-14 11:30

    @000
    看到“只限PC”,不过我发现我的iOS的Safari也是支持粘贴上传的
    红米Note4超高配版(银色)

  • 000
    @Ta / 03-14 13:09
    @水木易安,然而我并没有ios设备 
  • @Ta / 07-10 09:35

    @老虎会游泳insertText 是每个页面都会有的函数是吧?
    红米Note4超高配版(银色)

  • mio
    @Ta / 07-10 12:30

    @水木易安,不是,内信私聊就没 所以我修改你的插件判断有没这个函数

  • @Ta / 07-10 17:44

    @水木易安,本来不是,但是因为insertText被我定义在了你的插件代码里,所以现在是了

  • @Ta / 07-10 18:29

    @老虎会游泳
    红米Note4超高配版(银色)

添加新回复
回复需要登录

[聊天-此处没有老虎] 呆哥: 明盘域名出售页:XXS.ME