axupimgs
Version:
Tinymce Plugin - Upload multiple images
377 lines (341 loc) • 10.8 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>axupimgs</title>
<meta
name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
<meta
name="apple-mobile-web-app-capable"
content="yes"
/>
<meta
name="apple-mobile-web-app-status-bar-style"
content="black"
/>
<meta
name="format-detection"
content="telephone=no"
/>
<meta
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"
/>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
background: #fff;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrap {
padding: 10px;
}
#topbar {
padding: 10px 0;
border-bottom: 1px solid #ccc;
text-align: right;
}
#topbar button {
margin: 0;
margin-left: 5px;
outline: none;
padding: 4px 16px;
box-sizing: border-box;
display: inline-block;
border: none;
border-radius: 3px;
text-align: center;
cursor: pointer;
font-size: 14px;
line-height: 1.5;
background-color: #f0f0f0;
color: #223;
}
#topbar button.primary {
background-color: #3d97d4;
color: #fff;
}
#topbar button:hover {
background-color: #207ab7;
color: #fff;
}
#topbar button.removeall {
float: left;
}
#file_list {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
padding-top: 10px;
}
#file_list:empty:after {
content: '可以直接拖拽图片到这里';
color: #777;
font-size: 0.8em;
}
#file_list li {
position: relative;
display: block;
vertical-align: top;
padding: 5px 5px;
border-radius: 5px;
}
#file_list li.up-over {}
#file_list li.up-now {}
#file_list li.up-now:after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8) url(loading.gif) center center no-repeat;
border-radius: 5px;
z-index: 999;
}
#file_list li:hover {
background-color: #ddd;
}
#file_list li .picbox {
display: flex;
flex: 0 0 auto;
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
padding-top: 100%;
align-items: center;
}
#file_list li .picbox img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
#file_list li.up-over .picbox:after {
content: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M512%200C229.376%200%200%20229.376%200%20512s229.376%20512%20512%20512%20512-229.376%20512-512S794.624%200%20512%200z%22%20fill%3D%22%234AC711%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M855.552%20394.752l-358.4%20358.4a50.9952%2050.9952%200%200%201-72.192%200l-204.8-204.8c-18.944-19.968-18.944-51.2%200-71.168a50.5344%2050.5344%200%200%201%2072.192-1.024L460.8%20644.608l322.048-322.048c19.968-18.944%2051.2-18.944%2071.168%200%2020.48%2019.456%2020.992%2051.712%201.536%2072.192z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
position: absolute;
bottom: 2px;
right: 2px;
z-index: 9;
}
#file_list li .tools {
display: none;
position: absolute;
bottom: 5px;
right: 5px;
z-index: 99;
}
#file_list li:hover .tools {
display: block;
}
#file_list li .tools .remove {
cursor: pointer;
}
#file_list li .tools .remove:after {
content: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17%206h3a1%201%200%200%201%200%202h-1v11a3%203%200%200%201-3%203H8a3%203%200%200%201-3-3V8H4a1%201%200%201%201%200-2h3V5a3%203%200%200%201%203-3h4a3%203%200%200%201%203%203v1zm-2%200V5a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v1h6zm2%202H7v11a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1V8zm-8%203a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6zm4%200a1%201%200%200%201%202%200v6a1%201%200%200%201-2%200v-6z%22%3E%3C/path%3E%3C/svg%3E');
}
#file_list li .namebox {
font-size: 14px;
line-height: 20px;
max-height: 40px;
overflow: hidden;
padding: 5px 10px;
text-align: center;
display: flex;
justify-content: center;
align-items: flex-start;
}
#file_list li .namebox span {
word-break: break-all;
vertical-align: top;
}
</style>
</head>
<body>
<div id="wrap">
<div id="topbar">
<button class="addfile primary">+ 添加图片</button>
<button class="upall primary">全部上传</button>
<button class="removeall">清空列表</button>
</div>
<ul id="file_list"></ul>
</div>
<script>
var editor = parent.tinymce.activeEditor
var axupimgs = parent.axupimgs
axupimgs.res = [] //存放本地图片的数组
var blobInfo = { file: null }
blobInfo.blob = function () {
return this.file
}
var upload_handler = axupimgs.many_images_upload_handler
var upload_base_path = axupimgs.images_upload_base_path
//为列表添加排序
function reSort () {
document.querySelectorAll('#file_list li').forEach((el, i) => {
el.setAttribute('data-num', i)
})
}
function addList (files) {
var files_sum = files.length
var vDom = document.createDocumentFragment()
for (let i = 0; i < files_sum; i++) {
let file = files[i]
let blobUrl = window.URL.createObjectURL(file)
axupimgs.res.push({ file: file, blobUrl: blobUrl, url: '' })
let li = document.createElement('li')
li.setAttribute('class', 'up-no')
li.setAttribute('data-time', file.lastModified)
li.innerHTML =
'<div class="picbox"><img src="' +
blobUrl +
'"></div><div class="namebox"><span>' +
file.name +
'</span></div><div class="tools"><a class="remove"></a></div>'
vDom.appendChild(li)
}
document.querySelector('#file_list').appendChild(vDom)
//reSort();
}
//清空列表
document.querySelector('#topbar .removeall').addEventListener('click', () => {
axupimgs.res = []
document.querySelectorAll('#file_list li').forEach((el, i) => {
el.parentNode.removeChild(el)
})
})
//拖拽添加
document.addEventListener('dragover', e => {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
})
document.addEventListener('drop', e => {
e.stopPropagation()
e.preventDefault()
if (!e.dataTransfer.files) {
return false
}
var dropfiles = e.dataTransfer.files
if (!(dropfiles.length > 0)) {
return false
}
var exts = axupimgs.axupimgs_filetype
.replace(/(\s)+/g, '')
.toLowerCase()
.split(',')
var files = []
for (let file of dropfiles) {
ext = file.name.split('.')
ext = '.' + ext[ext.length - 1]
for (let s of exts) {
if (s == ext) {
files.push(file)
break
}
}
}
if (files.length > 0) {
addList(files)
}
})
//添加图片
document.querySelector('#topbar .addfile').addEventListener('click', () => {
var input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('multiple', 'multiple')
input.setAttribute('accept', axupimgs.axupimgs_filetype)
input.click()
input.onchange = function () {
var files = this.files
addList(files)
}
})
var file_i = 0
function upAllFiles (n) {
var len = axupimgs.res.length
file_i = n
if (len == n) {
file_i = 0
document.querySelector('#topbar .upall').innerText = '全部上传'
return true
}
if (axupimgs.res[n].url != '') {
n++
upAllFiles(n)
} else {
blobInfo.file = axupimgs.res[n].file
upload_handler(
blobInfo,
function (url) {
if (upload_base_path) {
if (upload_base_path.slice(-1) == '/' && url.substr(0, 1) == '/') {
url = upload_base_path + url.slice(1)
} else if (upload_base_path.slice(-1) != '/' && url.substr(0, 1) != '/') {
url = upload_base_path + '/' + url
} else {
url = upload_base_path + url
}
}
axupimgs.res[file_i].url = url
filename = url.split('/').pop()
var li = document.querySelectorAll('#file_list li')[file_i]
li.setAttribute('class', 'up-over')
li.querySelector('.namebox span').innerText = filename
n++
upAllFiles(n)
},
function (err) {
document.querySelector('#topbar .upall').innerText = '全部上传'
document.querySelectorAll('#file_list li.up-now').forEach((el, i) => {
el.setAttribute('class', 'up-no')
})
alert(err)
}
)
}
}
document.querySelector('#topbar .upall').addEventListener('click', e => {
if (e.target.innerText != '全部上传') {
return false
}
if (axupimgs.res.length > 0) {
document.querySelectorAll('#file_list li.up-no').forEach((el, i) => {
el.classList ? el.classList.add('up-now') : (el.className += ' up-now')
})
e.target.innerText = '上传中...'
upAllFiles(0)
}
})
var observ_flist = new MutationObserver((muList, observe) => {
if (muList[0].addedNodes.length > 0) {
muList[0].addedNodes.forEach(el => {
el.querySelector('.remove').addEventListener('click', e => {
var li = e.target.parentNode.parentNode
var n = li.getAttribute('data-num')
var el = document.querySelectorAll('#file_list li')[n]
el.parentNode.removeChild(el)
axupimgs.res.splice(n, 1)
})
})
}
reSort()
})
observ_flist.observe(document.querySelector('#file_list'), { childList: true })
</script>
</body>
</html>