|
|
<!DOCTYPE html><html lang="zh_CN"><head><meta charset="utf-8"><title>批量上传图片</title><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1"><style>body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5;color:rgba(34,47,62,.7);height:100vh;margin:0}button{font:inherit;line-height:24px;cursor:pointer;outline:0}button:disabled{cursor:not-allowed}.button{color:#222f3e;padding:4px 16px;background-color:#f0f0f0;border:1px solid #f0f0f0;border-radius:3px}.button:hover{color:#222f3e;background-color:#e3e3e3;border-color:#e3e3e3}.button:disabled{color:rgba(34,47,62,.5);background-color:#f0f0f0;border-color:#f0f0f0}.button+.button{margin-left:4px}.primary{color:#fff;background-color:#207ab7;border-color:#207ab7}.primary:hover{color:#fff;background-color:#1c6ca1;border-color:#1c6ca1}.footer,.header{padding:8px 16px;display:flex;justify-content:space-between}.header{border-bottom:1px solid #ccc}.footer{border-top:1px solid #ccc}.tip{margin-left:4px}.main{height:calc(100vh - 102px);overflow-y:auto}.list{list-style:none;padding:8px;margin:0;display:flex;flex-wrap:wrap}.item{width:132px;margin:8px;position:relative}.item:after,.item:hover .remove{width:32px;height:32px;border-radius:32px}.item:after{content:"";position:absolute;top:6px;right:6px;z-index:1}.item[data-state="0"]:after{background:#909399 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKpJREFUeNpi/P//P8NAAiaGAQajDhhwB7BQopmRkRGrODBhcwKp7wMWAkCHgSznI0othdnwP9RCRhwhMZoIRx0w6oAR4gBgfpcfKAdchdIHgI6QJdf1lGBxIL77HwLuA7EMqWZT5ACoJTgdQRcH4HCEBF0dgMURt0GOIMYMqmVDYIX4EkjZAPFtIFYBYn+aJ0Ic5kkCcQGxZjOONstHHTDqgFEHDLQDAAIMAHU60RArKZrVAAAAAElFTkSuQmCC) no-repeat 50%}.item[data-state="1"]:after{background:#fff url(data:image/gif;base64,R0lGODlhGAAYAPYAALGxsbOzs7S0tLu7u76+vsDAwMXFxcrKys/Pz9LS0tXV1dvb29zc3OPj4+Xl5enp6e7u7vHx8fb29vr6+rCwsLKysre3t7i4uLy8vMLCwsfHx8vLy9HR0dfX19nZ2d/f3+Dg4Orq6uzs7PDw8Pf396+vr7a2tr+/v9PT09bW1uHh4fPz8/v7+7q6uszMzOLi4vX19b29vc7OztDQ0N7e3ubm5uvr6+/v7/Ly8vn5+bW1tcjIyM3NzdTU1Ofn5/T09MnJydra2sbGxsHBwd3d3fj4+MPDw+3t7djY2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/i1NYWRlIGJ5IEtyYXNpbWlyYSBOZWpjaGV2YSAod3d3LmxvYWRpbmZvLm5ldCkAIfkEAQoAFAAsAAAAABgAGAAABeYgJY6jBD0PJJFsOz0Lchj0kThTy0LKTNOFAoFweOR0D9nMZxAOCYUGEqFMMCCRyINhIAy+DFYkIUM0jiTJgiAYEB6jSYxq1IkYbMHhCEmQpXYjCgMCAg4UEw1+CyuBIhIFAgF7cn6HjoIBAQQSEQsKChGYIw4BAAEPEaALoqMUEF8DDqoKjK6InRITarWtt4gUEg0LC3CuE8ikxGfHyEcRDNEQo7u6cQ7RDb461dYlDQ0MDRBocRLn5+UU0OAOqbrInVkR3mIODQ7uKCcQWFnqaR7kQ7GvHz2ALUwQ7Kci2a148AKFAAAh+QQBCgAAACwAAAAAGAAYAAAG+UCAcDgkjUTIiZLIJE5EHw5iQ0V4QpMmc+SRUjeacJgj0gpDHSliTRVnMhtQlilKSzsO0WgU+iDebyBbHml4JE0kHhoYGRohQxMgHZNYZgAgGRgXCHNckw6WQhMfGKWgAA4eHh9zoSQaFxccSiCqj6GiHrEZJImrI7hDIbEXISMfq4fBACKaxSMgHyDKwSIW1w4k0dPLqBYVxRMOICBlwRMdFRUYhyLkDq2WJBgUFRtZJOMOwLijGBWCADwB4cBYqCXHWpEI4aDgiHiQlEAUwidECCQkJCrJKNHMQotI9oww0iujpQlGQooc2WuiFiNH9pR0eZAjTQBBAAAh+QQBCgAAACwAAAAAGAAYAAAG+UCAcDhkrSAhiITIbLIgqhRqOv2EWE3mKiqdblCbcAqCzUIWqTQVHG47ysQzOvVxKI/RjWbv0H4WgFdNEh96GhsQRQ6AH4lwRCwOewUoLFgrH3+CWUIsHxoFBSFCISqmj5wSG6Eplg6miZxMCwUnGhISpipLskQhtQVKrw68vUIQtSfEDszFxhAn0cvNxkMhFxeiLCEhDivVQgvYtwBISahOEgXYG1gS3CHfvSwpJiYXfUIr3EqyniYBTJATIgGCQSXoWKAIwPDCKCIFDa7AhaUMiw0lGH5Id2TFRFwSLAEIYe8Duk4eJ34UCaCOMUsgQ1o6OW8mTSFBAAAh+QQBCgAAACwAAAAAGAAYAAAG+UCAcDhkRY4RlpLIJBodn8UiJX1BWE0m7BWdpr6c8CeSFUK4Uik1FW6HsMzIC22NwI6OBcfl4oS0DlxWcEQwDnx8EEUhcy9khEwhLgcHC3CGgYplQy8HGgd/ABAODm+bQzAcGhoLACwhIQ6ap0Ifqy4wr7EwtEMQqwd2sKa9ABEaBQUhMMNKkGW/BRpvENXPmyHJBVcR1bzFC8kHvN0QSb0wBwQFHFhGR9+bLAstLQQOQu9210UfBPYuCBmBQXCJlhT17IXKx4JgQTijUhQQkPBFloa5GgKA0SJAAAEgCXzg5yqjkggdPbaYVmwJRwEEXLwgKa/UuSxBAAAh+QQBCgAAACwAAAAAGAAYAAAG9ECAcDjMkXA4EilHbDpxttqLtqC9ajimk0iyvaY06mLR6dBwWyGuJp1+xeXOwrYlse+35NFGK886N1pCXVE1gU52fjNoQzdRNoxpNh0zMzRahJBpRTWVMzdqNjagm0MkHTIyNAA5N64kpUQvqTNLOK+xQq0yBzKBt1m5age9v0iCsTjEB8bBwjYGBsxGSsilNNIysErOsSQy0QtM1DnWTjk0GRkGdLrl5k0v6hkzgu/jS6z6JAsZMeukiGihEaODIUcLDMRYaODFJhIDKlSwMKBixYUZXsATQkOiRwsgB8RgFivHiwMxQFKkV2PjFihsbOTbEgQAIfkEAQoAAAAsAAAAABgAGAAABu5AgHBI/Bl/OaJymfvdbL7oy2fDJZfE3BPqe3k/YN8PK3TauNLvx/O5YX+47e3YvL3Wa3c2fptfszYegh44RX1zZEI3gy9XOThxY4lCgT09eo9wk0M/Hxw9L2VGf5s2lh5JdJtDOByfVjlNq6w9rjexsbNCrbYAuKSTNzw8HGO4ugAvw8VKwFg5HMMffzY7Pc5KLzs7PHoAHzolOh+JOT47GjuoQz46FRU6PZJ/nejp3kLgOvsZPTY3OGx82JFBQzofTD5c2HfhwomHJzJIzLADIRkbGhY2hBhRAwd8z3xwyACRYg8f2Jg04WJDEpYgACH5BAEKAAAALAAAAAAYABgAAAf9gACCg4M5ORIShoSLjAA5KysQNpM2EImNhIcQm5Q2NZ82EpgAEpCbnJOfNSA1ooyHpZCJsCufILcrOZmIpZeLORC3t66CsL6Njx/KNbrFh82jADYfQR8rzorRxSDUNZnQ2jZB1c3g2o9BCkG5vdqEEunrNQP0EO6CK+kKkjoVFd73VihQhyiGPwX3ANTgoM6QC38FiI2Cx4EDCEE1dGhEqK2Gi4r2SAHRQQ+EuUI2KnL4AM1GDJIxgkjc5qImh2uEPsSgFwNIkEorprkAYtNGIxAFYigtoKGpUyBEbZwUZMOF0hgFsj5VgHNUjhoKgGhgqsHFz6nIJEiqNJNQIAAh+QQBCgAAACwAAAAAGAAYAAAH/4AAgoOEExMkhoSKiwCHJCuQNzcriIyKjpGSNyGSJJaNmI+ZIaQhK5aGhoipJCSbIT4+noupiYUTK7CxswAkNKeNnwArsQ0hE4INFRg0yMK4DdGnEwcVy7yfEz7RIb0Y1j3ChDc0NA0TIRfWPuKC0OYkPhbzN+2CvuXEFxYX9fa+Hn6lu3CBnb0VNAJSEkLQgz0AITwENJTgAgYh2FAl9GDQB4aPDsWF6NHDAzASLj5mMGgpIslzg0JkwJAhA42MjXz0SEAS2KAGM2u6oGFqxY0GPVwk4OmvkA8hNYVIPeCiqlKe3RhNuJFA6lSrVU2K07bzANWlNG44a3dIkimcgwICAQAh+QQBCgAAACwAAAAAGAAYAAAH/4AAgoOELIaGACyEi4yJhiSQJIiNgw5EjiyRK5srk4ssRCYmD46amzc3JI2hFSVAirCZK6iokoQPFxUVJj2Kgr6ZtDe+iUKiJpeUACQ3Dw/Dgg4Xor3KgrPOqiwIJhdDqtaJzs/LQhcXPeGDKw8ODywPQxcEpOqZDu4kDgTeN+qC+vCReECgoL9/AUHMGlKwnjoSIEA4gCRkyJBk6m5EdGCoh0Ug4JQZsgSiXrwhQogQa8TiBhEiCn8lQAnEgUiXHjxwHHQDiBAhQECEHAQv58uhLBz4BAIkAYgbK5hZ6mH0YCEHCIAyTZCgR9ceYD1Aa3SjB4KzZ7mGjWmtpQezags9KFwpUhaqqMoCAQAh+QQBCgAAACwAAAAAGAAYAAAH/4AAgoODJDY1RYSKi4IkIAcEFQMkgomMijYaFhWckwBFoKCXADQEFpucBCuVRSStjCCmpwQdNRCWrSS6loM2BQPAHZSLrSsrroNFLsAENKOfxsaDNQQEAx28lyQrELefHdUaw88A3BCrJAcFBQvkhd0rRRAa6zbuld23vgUaEPefNgIaotfvX5GANuQd0FDwXpEaAVu5YOjMXZEVNSCCWsBwxrhRBzP6A2DjgEkQ7iBkrDGsSAeTLuyNwggCRMJBK2a42MmSUCJ5NUH0TGZDp4sZC2wdW2EDBA0aNVctKjqjaoerHRZoXQA13qUVNKrOwLo16UdGQBeQFer137ZzbQMZBQIAIfkEAQoAAAAsAAAAABgAGAAAB/+AAIKDgz9HPj5HKzmEjY05PhxGLS06OicuDT+OjQ8HJ5SWOhWkFR+cgw2TlKyVpCcrqACqJ7UGQQ9Hhxwnpzm/jUcGRidGQZuNP4zLhDmSRkYNsoO/jIIPw8bWsr/K1kEGBi7I0wA5P8oAPy7h0uWC5+gAKwcGBw/v8D8ri0cHBy5i5ZvHL4c/gALf5VihaKGLh0cGGmR4LsVDH9umGWoI4IMLDikyojKoS+ARDhxcYCy34oFLZDmCoEwRUdYPlw8Szksxc+WjFYh8PBD5IIXRFB9yojP0oEFQctQeBDkaJMiHDw2wOn0AtdGKD1WrXr3aoMGRro4W+gA7VuiigeYG9q1IhyoQACH5BAEKAAAALAAAAAAYABgAAAf/gACCgwA5ADAQNTUQMIaEj4Q5Nh1CGSeXQi41MJCPEAkZlicDpAMmA0I2jpA1B6Gil6QmJgEDH6uDrUKVBx82EIkdGbQBAR+eLrtCH5yPMB3EJjWDOR0H19OdhR8mJSbHgjYu17fagtUHqucfLi4dzeaFuM/tL/GPOfkAKwkuCRD3Iun75G9FQGr5cnxKkMDgwUKNcvBjCPBgDhgYLyJhmC3gxUaCXnToUO6exBUrmq0Y2cFGQEQoHeV4gaQDkoraYKwABm8fkp++cJ1DBGyFUAgfkCRdhBHjTgi/GHVCiuTFhxdYFSmy8aunsxofwmbdaiOlyRU2FL2owZWR0HgfBDOaCwQAOw==) no-repeat 50%}.item[data-state="2"]:after{background:#67c23a url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAlElEQVRYhe3SoQ6DMBSFYQQEM7EHIhnhmZsJzB5pQbCC+meuIDfZVNtrzm9IMN9p065TSilVIaAHpkg8AScwR+EAe9NbAIZofK2GAxPQ/8Gfhn+AR2l8tgeV/Ah38lzl2u30uyEJGOz/6PClOO5GZMNW4Aa8muCXEQtwGPq279EEdyNy05P/GLGF4JcR9zBcKaVK9wVD9QBiLEmZNQAAAABJRU5ErkJggg==) no-repeat 50%}.item[data-state="-1"]:after{background:#f56c6c url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMRJREFUeNrsltENhCAMhunFARiRzc5NHOEcxQ16NfKgpuV+PAgvbUIg2vT/rC1AzBxG2isMNgdwAAcYDjChjkQE+cnGFsV3y+t2GZBgScZnFyiJy7TI/A4VgdGx8mEqxP4sv+PsG5G4NQDRgtDE0Y+DAU5CFwhLvAuAAaGKdwNQIFRxFOCffYCNdWWUZ7/gnHazO3oV4b3VSt3RvA2talchWgOsPwpOa9GmAMkSVyBmNAOE3op7HUbk13IHcAAHGA3wFWAAq3KVr54sfUUAAAAASUVORK5CYII=) no-repeat 50%}.image{width:128px;height:128px;-o-object-fit:scale-down;object-fit:scale-down;padding:1px;border:1px solid #ccc}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove{position:absolute;top:6px;right:6px;z-index:2;cursor:pointer;display:none}.item:hover .remove{background:#207ab7 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAiklEQVQ4je3U2wnCQBCF4ZRgCVtCOnBLSCdaQkpKJ6YD7eTzRWET12QwDxLIgQPLzM4Ph700za6F0aduW4BwRS4MbWQ44TwzXAK1VAP2lXhR9WsxcyBRhkj0HQHR4l70Hu8T/hU4GVrqHcCvwJPimc3W/702XWBfFwUO4hpWgS9oMv2yak4h2FY9AePc46ITbYMkAAAAAElFTkSuQmCC) no-repeat 50%;display:block}</style></head><body><div class="header"><div class="header-start"><button id="choose" class="button primary">选择图片</button> <span class="tip">支持上传JPG、PNG、GIF格式，一次最多上传10张图片</span></div><div class="header-end"><button id="upload" class="button">批量上传</button></div></div><div id="main" class="main"><ul id="list" class="list"></ul></div><div class="footer"><div class="footer-start"></div><div class="footer-end"><button id="cancel" class="button">取消</button> <button id="empty" class="button">清空列表</button> <button id="insert" class="button primary">全部插入</button></div></div><script>"use strict";var _parent$BatchUploadIm=parent.BatchUploadImage,editor=_parent$BatchUploadIm.activeEditor(),dialog=_parent$BatchUploadIm.dialog,uploadHandler=editor.getParam("images_upload_handler",void 0,"function"),fileType=editor.getParam("batch_upload_image_type",["jpg","jpeg","png","gif"],"array"),accept=fileType.map((function(e){return".".concat(e)})).toString(),uploadButton=document.querySelector("#upload"),list=document.querySelector("#list"),images=[];function ext(e){return e.split(".").pop()}function checkImage(e){e.length&&(e=Array.from(e).filter((function(e){return-1<fileType.indexOf(ext(e.name))})).map((function(e){var t=window.URL.createObjectURL(e);return images.push({file:e,blobUrl:t,url:"",state:0}),'<li class="item" data-state="0"><img class="image" src="'.concat(t,'" alt=""><div class="name" title="').concat(e.name,'">').concat(e.name,'</div><span class="remove"></span></li>')})),list.innerHTML+=e.join(""))}function uploadQueue(){var e,t,a=images.findIndex((function(e){return 0===e.state}));-1!==a?((e=list.querySelectorAll("li")[a]).dataset.state="1",a={type:'batch',file:(t=images[a]).file,filename:function(){return t.file.name},blob:function(){return t.file}},uploadHandler(a,(function(a){t.url=a,t.state=2,e.dataset.state="2",uploadQueue()}),(function(){t.state=-1,e.dataset.state="-1",uploadQueue()}))):uploadButton.disabled=!1}document.querySelector("#choose").addEventListener("click",(function(){var e=document.createElement("input");e.setAttribute("type","file"),e.setAttribute("multiple","multiple"),e.setAttribute("accept",accept),e.onchange=function(){checkImage(this.files)},e.click()})),uploadButton.addEventListener("click",(function(){var e=0;images.forEach((function(t){""===t.url&&(e++,-1===t.state&&(t.state=0))})),e&&(this.disabled=!0,uploadQueue())})),document.querySelector("#cancel").addEventListener("click",(function(){dialog.close()})),document.querySelector("#empty").addEventListener("click",(function(){document.querySelector("#list").innerHTML="",images.length=0})),document.querySelector("#insert").addEventListener("click",(function(){var e;images.length&&(e="",images.forEach((function(t){t.url&&(e+='<img src="'.concat(t.url,'" alt="" />'))})),editor.insertContent(e),images.length=0),dialog.close()})),document.addEventListener("dragover",(function(e){return e.preventDefault()})),document.querySelector("#main").addEventListener("drop",(function(e){e.preventDefault(),checkImage(e.dataTransfer.files)})),list.addEventListener("click",(function(e){var t=e.target;t.classList.contains("remove")&&(e=Array.from(list.querySelectorAll(".remove")).indexOf(t),list.removeChild(t.parentElement),images.splice(e,1))}));</script></body></html> |