iT邦幫忙

10

IT鐵人賽小工具 : Ctrl + V 自動上傳圖片功能

先上效果GIF圖 :

主要目的 : 解決IT邦幫忙編寫文章都需要保存圖片到本機 > 點擊上傳按鈕 > 上傳 > 插入 ,操作不直接問題。
改成 : 剪貼簿有圖片,直接在文章編寫區按Ctrl + V就可以自動上傳圖片,並複製成MarkDown Img格式
https://ithelp.ithome.com.tw/upload/images/20190908/201059888rXAliB061.png

架設方式 :

  1. 安裝Chrome Tampermonkey , 連結 : Tampermonkey - Chrome 線上應用程式商店

  2. 點擊Tampermonkey > 啟用 > 新增腳本
    https://ithelp.ithome.com.tw/upload/images/20190908/20105988do062MQxxk.png

  3. 貼上下面腳本 > Ctrl + S 保存就可以
    https://ithelp.ithome.com.tw/upload/images/20190908/20105988x28vgFo9r8.png

// ==UserScript==
// @name         Ctrl + V 上傳圖片腳本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  嫌麻煩,做來方便上傳圖片用
// @author       IT邦幫忙 - 暐翰
// @match        https://ithelp.ithome.com.tw/*
// @grant        none
// ==/UserScript==

(function () {
    var url = '/api/upload'; //IT幫上傳圖片連結

    document.onpaste = function (event) {
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        for (var index in items) {
            var item = items[index];
            if (item.kind === 'file') {
                var formData = new FormData();
                formData.append("images[]", item.getAsFile()); //IT邦圖片 key name

                $.ajax({ //因為IT邦token保存jquery,所以要使用jquery ajax
                    url: '/api/upload',
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: SaveMdImgLinkTextToClipBoard
                });
            }
        };
    };
})();


function SaveMdImgLinkTextToClipBoard(json) {
    $("body")
        .append(
            $('<textarea id="textToCopyInput"/>')
                .val("![" + json.url + "](" + json.url + ")")
        )
        .find("#textToCopyInput")
        .select();
    var successful = document.execCommand('copy');
    if(successful){
        alert("圖片上傳成功,已保存圖片MarkDown連結在剪貼簿,連結 :" + json.url);
    }else{
        alert("圖片上傳失敗");
    }
    $("#textToCopyInput").remove();
}


假如有幫到邦友,希望大大們可以幫忙分享或是提供修改建議 ^___^


以下是原理,提供給有興趣了解的大大

首先查看IT邦幫忙上傳圖片邏輯 :

  1. 使用的是input file方式載入圖片
    https://ithelp.ithome.com.tw/upload/images/20190908/20105988PZQHP5X8Us.png
  2. url連結是/api/upload
    https://ithelp.ithome.com.tw/upload/images/20190908/20105988Y7fCHT60b3.png
  3. Form Data key name 是 images
  4. 因為IT邦token保存在Jquery ajax,所以不能用原生js來寫ajax否則會出現驗證失敗
    https://ithelp.ithome.com.tw/upload/images/20190908/20105988WadzWcvJB7.png
    https://ithelp.ithome.com.tw/upload/images/20190908/20105988vQfw1VAxCY.png
  5. 加上alert避免有人濫用,大量上傳圖片

假如大大們想要拖拉功能,可以參考 dragonH大大的文章 IT幫鐵人賽小工具: 拖拉上傳本機圖片


1

超實用欸!

暐翰 iT邦大師 1 級‧ 2019-09-09 00:28:41 檢舉

感謝推薦 ^__^

1
CynthiaChuang
iT邦新手 5 級 ‧ 2019-09-08 21:16:57

推推!好實用!

暐翰 iT邦大師 1 級‧ 2019-09-09 00:28:48 檢舉

感謝推薦 ^__^

1
黑修斯
iT邦新手 5 級 ‧ 2019-09-08 23:03:05

推推,超實用

暐翰 iT邦大師 1 級‧ 2019-09-09 00:28:53 檢舉

感謝推薦 ^__^

1
微中子
iT邦新手 4 級 ‧ 2019-09-09 01:37:37

我都 crtl + v 到 github,然後拷貝連結過來

暐翰 iT邦大師 1 級‧ 2019-09-09 08:05:25 檢舉

這也是一個好方法! issue那邊也有ctrl+v功能

1
詠竣
iT邦新手 5 級 ‧ 2019-09-09 08:33:53

推推!

暐翰 iT邦大師 1 級‧ 2019-09-09 08:53:16 檢舉

朋友,謝啦 :)

我要留言

立即登入留言