whatshot[网页插件]🚀图文快贴uniCloud版（可显示上传进度）

改自 @水木易安 的图文快贴插件，原帖：https://hu60.cn/q.php/bbs.topic.97322.html

上传到阿里云为uniCloud提供的免费云存储（单文件最大100MB）。

使用方法

点击下方的“导入网页插件”按钮，输入yes再点确定即可。

<script src="/tpl/classic/js/humanize/humanize.js"></script>
<script src="api.webplug-file.1_public_quick_paste_unicloud.js"></script>

然后就能用这个🚀图文快贴按钮上传附件了。

附完整代码（供插件开发者参考，不建议直接使用，因为太长了）

感谢 @cnhong 和 @000 为本插件实现了按需载入js（本帖22楼和本帖27楼）。

<!--图文快贴uniCloud版-->
<script src="/tpl/classic/js/humanize/humanize.js"></script>
<script>
/**图文拖拽快传插件开始**/
$(function () { // 【😭😭😭】
  var content = document.getElementById('content');
  if(!content) return '😥非帖子页面不继续执行';

  // 粘贴
  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);
    }
  });

  // 拖放
  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) {
    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 {
        uploadFile(file);
      }
    })
  }

  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;  
    }  
  }

  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.transition = 'transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
      m.style.opacity = '0';
      setTimeout(function () {
        document.body.removeChild(m)
      }, d * 1000);
    }, duration);
    // 如果不需要提示框，请删除上面的代码
  }

  async function uploadFile(file) {
    try {
      if (!document.uniCloud) {
        Toast("加载上传组件");
        $.ajaxSetup({cache: true});
        await Promise.all([
          $.getScript('//static.hu60.cn/uploader/static/js/chunk-vendors.55f397b6.js'),
          $.getScript('//static.hu60.cn/uploader/static/js/index.8b152a51.js'),
        ]);
      }

      var basename = /[^\/\\]*$/.exec(file.name);
      var size = humanize.filesize(file.size);

      Toast("开始上传");
      var result = await document.uniCloud.uploadFile({
        filePath: URL.createObjectURL(file),
        cloudPath: file.name,
        onUploadProgress(e) {
					console.log(e);
          Toast("已上传 " + humanize.filesize(e.loaded) + ' / ' + humanize.filesize(e.total) + ' (' + (e.loaded / e.total * 100).toFixed(2) + '%)');
				}
      });
      console.log(result);

      var url = result.fileID;
      var ubb = '';

      if (/\.(jpe?g|png|gif|bmp|webp|hei[cf]|avif)$/i.test(url)) {
        ubb = '《图片：' + url + '，' + basename + '》';
      } else if (/\.(mp4|m3u8|m4v|ts|mov|flv)$/i.test(url)) {
        ubb = '《视频流：' + url + '》';
      } else if (/\.(mp3|wma|m4a|ogg|aac|flac)$/i.test(url)) {
        ubb = '《音频流：' + url + '》';
      } else {
        ubb = '《链接：' + url + '，' + basename + '（' + size + '）》';
      }

      Toast("上传成功");
      insertText(document.getElementById("content"), ubb);
    } catch (ex) {
      console.log(ex);
      Toast("上传失败\n" + JSON.stringify(ex));
    }
  }

}); // 【😭😭😭】
/**图文拖拽快传插件结束**/
</script>