diff --git a/README.md b/README.md index 9a24114..767098d 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ ## 更新日志 +2022.11.8 支持粘贴、拖拽上传图片。 + 2022.10.24 添加 visiblity 发送设置。 ## 说明 diff --git a/js/oper.js b/js/oper.js index 18ddd11..bbf477f 100644 --- a/js/oper.js +++ b/js/oper.js @@ -8,7 +8,14 @@ get_info(function (info) { $('#blog_info').hide() } $('#apiUrl').val(info.apiUrl) - $('#content').val(info.open_content) + if (info.open_action === 'upload_image') { + //打开的时候就是上传图片 + console.log(info.open_content) + uploadImage(info.open_content) + } else { + $('#content').val(info.open_content) + } + //从localstorage 里面读取数据 setTimeout(get_info, 1) }) @@ -21,6 +28,129 @@ $('#content').blur(function () { ) }) +//监听拖拽事件,实现拖拽到窗口上传图片 +initDrag() + +//监听复制粘贴事件,实现粘贴上传图片 +document.addEventListener('paste', function (e) { + let photo = null + if (e.clipboardData.files[0]) { + photo = e.clipboardData.files[0] + } else if (e.clipboardData.items[0] && e.clipboardData.items[0].getAsFile()) { + photo = e.clipboardData.items[0].getAsFile() + } + + if (photo != null) { + uploadImage(photo) + } +}) + +function initDrag() { + var file = null + var obj = $('#content')[0] + obj.ondragenter = function (ev) { + if (ev.target.className === 'common-editor-inputer') { + $.message({ + message: '拖拽到窗口上传该图片', + autoClose: false + }) + $('body').css('opacity', 0.3) + } + + ev.dataTransfer.dropEffect = 'copy' + } + obj.ondragover = function (ev) { + ev.preventDefault() //防止默认事件拖入图片 放开的时候打开图片了 + ev.dataTransfer.dropEffect = 'copy' + } + obj.ondrop = function (ev) { + $('body').css('opacity', 1) + ev.preventDefault() + var files = ev.dataTransfer.files || ev.target.files + for (var i = 0; i < files.length; i++) { + if (files[i].type.indexOf('image') >= 0) { + file = files[i] + break + } + } + uploadImage(file) + } + obj.ondragleave = function (ev) { + ev.preventDefault() + if (ev.target.className === 'common-editor-inputer') { + console.log('ondragleave' + ev.target.tagName) + $.message({ + message: '取消上传' + }) + $('body').css('opacity', 1) + } + } +} + +let relistNow = [] +function uploadImage(data) { + //显示上传中的动画…… + $.message({ + message: '上传图片中……', + autoClose: false + }) + //根据data判断是图片地址还是base64加密的数据 + get_info(function (info) { + const formData = new FormData() + if (info.status) { + formData.append('file', data) + $.ajax({ + url: info.apiUrl.replace(/api\/memo/,'api/resource'), + data: formData, + type: 'post', + cache: false, + processData: false, + contentType: false, + dataType: 'json', + + success: function (result) { + console.log(result) + if (result.data.id) { + //获取到图片 + relistNow.push(result.data.id) + chrome.storage.sync.set( + { + open_action: '', + open_content: '', + resourceIdList: relistNow + }, + function () { + $.message({ + message: '上传成功' + }) + } + ) + } else { + //发送失败 + //清空open_action(打开时候进行的操作),同时清空open_content + chrome.storage.sync.set( + { + open_action: '', + open_content: '', + resourceIdList: [] + }, + function () { + $.message({ + message: '上传图片失败' + }) + } + ) + } + } + }) + } else { + $.message({ + message: '所需要信息不足,请先填写好绑定信息' + }) + } + }) +} + $('#saveKey').click(function () { // 保存数据 chrome.storage.sync.set( @@ -56,6 +186,7 @@ $('#tags').click(function () { } }) }) + $('#unlock,#locked').click(function () { get_info(function (info) { var nowlock = info.memo_lock @@ -123,7 +254,9 @@ function get_info(callback) { apiUrl: '', memo_lock: 'Public', open_action: '', - open_content: '' + open_content: '', + resourceIdList: [] + }, function (items) { var flag = false @@ -138,6 +271,8 @@ function get_info(callback) { returnObject.memo_lock = items.memo_lock returnObject.open_content = items.open_content returnObject.open_action = items.open_action + returnObject.resourceIdList = items.resourceIdList + if (callback) callback(returnObject) } ) @@ -152,11 +287,16 @@ $('#content_submit_text').click(function () { $.message({message: '写点什么,再记呗?'}) } }) + +let lockNow = 'Public' function sendText() { get_info(function (info) { if (info.status) { //信息满足了 console.log(info.memo_lock) + if(info.memo_lock){ + lockNow = info.memo_lock + } $.message({message: '发送中~~'}) //$("#content_submit_text").attr('disabled','disabled'); let content = $('#content').val() @@ -165,14 +305,16 @@ function sendText() { type:"POST", data:JSON.stringify({ 'content': content, - 'visibility': info.memo_lock + 'visibility': lockNow, + 'resourceIdList': info.resourceIdList, }), contentType:"application/json;", dataType:"json", success: function(result){ //发送成功 + console.log(result) chrome.storage.sync.set( - { open_action: '', open_content: '' }, + { open_action: '', open_content: '',resourceIdList:''}, function () { $.message({ message: '发送成功!😊' @@ -183,7 +325,7 @@ function sendText() { ) },error:function(err){//清空open_action(打开时候进行的操作),同时清空open_content chrome.storage.sync.set( - { open_action: '', open_content: '' }, + { open_action: '', open_content: '',resourceIdList:'' }, function () { $.message({ message: '网络问题,发送失败!😭' diff --git a/manifest.json b/manifest.json index 9fd53d6..cb3802b 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "__MSG_extName__", - "version": "2022.10.24", + "version": "2022.11.8", "action": { "default_popup": "popup.html", "default_icon": "assets/logo_24x24.png",