最近注意到论坛有虎友发布了图片上传教程,却被部分虎友吐槽步骤繁琐。
实际上大多数虎友并没有压缩图片的相关需求,特此推出一个超快贴图(文)的插件。
早在此之前,我们就可以使用这款剪切板传图插件复制粘贴快速贴图。
为了让PC虎友更快一步,我们支持了拖拽上传,将文本、二进制文件拖拽到输入框,输入框背景会变成灰色,松手,即可完成上传。(小提示:文本类文件不会作为附件上传,而是直接释放到输入框。)
此外,剪切板传图功能也整合了进来,在浏览器内“复制图像”或截图保存到剪切板后按Ctrl+V即可粘贴。(注意直接复制图片文件是粘贴不进来的,如果图片已经被保存为文件,只能拖放粘贴。)
如果你已经放置了之前的剪切板传图插件代码,请删除以避免冲突。
在添加附件的右侧多出一个 ?图文快贴
的按钮,看到那个小火箭了吗?点击一下他,立刻开始选择图片。当完成选图后,将会立即上传。同时你也可以直接拍照上传~
导入网页插件:🚀图文快贴(当前用户:1,总安装次数:1)!!!重要 使用插件助手的虎友,请删除(屏蔽)下面带 【???】的两行代码即可,并在插件中设置为【自动执行】
<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(白)
小米MIX2s(白)
大佬666
红米Note7 高配版(黑色)
6666
loc.cc / 非人类论坛
@呆哥,@姜辰,@无道,@枫叶飘,正在使用

?图文快贴
功能和你们互动~小米MIX2s(白)
@水木易安,


hmd global nokia 7 plus(黑色)
Dark's blog---精品域名出售---淘宝优惠券
用插件助手咋不行?
@穴儿,我刚刚自测了一下 没毛病
插件助手没用过哦
看看有什么报错没有
🚀图文快贴
按钮出来了吗 ?小米MIX2s(白)
@水木易安,木有。。。
@穴儿,打开控制台 看看有什么报错吗
小米MIX2s(白)
@水木易安,


@穴儿,那我大概明白了 我想想办法
小米MIX2s(白)
@水木易安,嘿嘿,小白一键,多方便。。
@穴儿,你那个第三个插件"表情"是哪一个插件啊
小米MIX2s(白)
@穴儿,我新修改了代码 你再看看吧
改成了:
小米MIX2s(白)
@水木易安,还是不行。。难道哪里搞错了??
那个表情啊??