Browse Source

优化

pull/16/head
xiaoz 6 years ago
parent
commit
7781d20812
  1. 19
      README.md
  2. 2
      miniup.html
  3. 112
      static/ctrv-upload.js
  4. 9
      static/index.js
  5. 4
      tpl/user/header.php

19
README.md

@ -6,6 +6,12 @@ ImgURL是一款简单、纯粹的图床程序,使用PHP + SQLite 3开发,不
* 需要exif函数支持 * 需要exif函数支持
* SQLite 3 * SQLite 3
### 安装
* 访问:<a href = "https://github.com/helloxz/imgurl/archive/master.zip" target = "_blank" rel = "nofollow">master.zip</a>下载最新版ImgURL程序,放到您的站点根目录并解压。
* 访问 `http(s)://domain.com/check.php` 获取配置信息,并记录下来。
* 修改 `config.php` 设置你自己的域名和密码,访问 `http(s)://domain.com/` 即可,就是这么简单。
* ** 更多设置请参考帮助文档 **:[https://doc.xiaoz.me/docs/imgurl](https://doc.xiaoz.me/docs/imgurl) (必看)
### 开发计划 ### 开发计划
- [x] 图片上传与预览 - [x] 图片上传与预览
- [x] 一键生成链接 - [x] 一键生成链接
@ -14,6 +20,7 @@ ImgURL是一款简单、纯粹的图床程序,使用PHP + SQLite 3开发,不
- [x] 图片压缩 - [x] 图片压缩
- [x] 图片鉴黄 - [x] 图片鉴黄
- [x] API上传 - [x] API上传
- [x] 油猴脚本上传
- [ ] 图片水印 - [ ] 图片水印
@ -26,6 +33,7 @@ ImgURL是一款简单、纯粹的图床程序,使用PHP + SQLite 3开发,不
* 优化“探索发现”,之前为随机显示12张,现在显示本月所有图片(流加载) * 优化“探索发现”,之前为随机显示12张,现在显示本月所有图片(流加载)
* 优化后台“看图模式” * 优化后台“看图模式”
* 修复一些BGU,优化CSS * 修复一些BGU,优化CSS
* 增加ImgURL脚本,可在任意网页上传图片,参考:[https://www.xiaoz.me/archives/11038](https://www.xiaoz.me/archives/11038)
#### v1.2 - 2018.08.11 #### v1.2 - 2018.08.11
* 增加URL批量上传 * 增加URL批量上传
@ -40,21 +48,18 @@ ImgURL是一款简单、纯粹的图床程序,使用PHP + SQLite 3开发,不
* 优化IP获取,及其它细节优化 * 优化IP获取,及其它细节优化
* 修复一些BUG * 修复一些BUG
### 安装
* 访问:<a href = "https://github.com/helloxz/imgurl/archive/master.zip" target = "_blank" rel = "nofollow">master.zip</a>下载最新版ImgURL程序,放到您的站点根目录并解压。
* 访问`http(s)://domain.com/check.php`获取配置信息,并记录下来。
* 修改`config.php`设置你自己的域名和密码,访问 `http(s)://domain.com/` 即可,就是这么简单。
* 更多设置请参考帮助文档:[https://doc.xiaoz.me/docs/imgurl](https://doc.xiaoz.me/docs/imgurl)
### 安全设置 ### 安全设置
* 配置完毕后测试功能没问题,请删除根目录的`check.php` * 配置完毕后测试功能没问题,请删除根目录的`check.php`
* Apache默认已经通过`.htaccess`文件来屏蔽数据库下载 * Apache默认已经通过`.htaccess`文件来屏蔽数据库下载
* Nginx用户请在server段内添加如下配置,并重启Nginx * Nginx用户请在server段内添加如下配置,并重启Nginx
``` ```nginx
location ~* \.(db3)$ { location ~* \.(db3)$ {
deny all; deny all;
} }
location ~* ^/(temp|upload)/.*.(php|php5)$ {
return 444;
}
``` ```
### Demo ### Demo

2
miniup.html

@ -128,7 +128,7 @@
<div style = "clear:both;"></div> <div style = "clear:both;"></div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src = "./static/index.js"></script> <script src = "./static/ctrv-upload.js"></script>
<script src="./static/layui/layui.js"></script> <script src="./static/layui/layui.js"></script>
<script src="./static/embed.js?v=1.2"></script> <script src="./static/embed.js?v=1.2"></script>
<script> <script>

112
static/ctrv-upload.js

@ -0,0 +1,112 @@
'use strict';
(function(root, factory){
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.ctrlVUtil = factory();
}
}(this, function(){
function ctrlVUtil(option){
this.targetElement = null;
this.uploadInput = null;
this.uploadUrl = "http://www.oa.com/screenshot/create-file";
this.isCompleteImg = false;
var that = this;
that.mixinConfig(option);
that.targetElement.addEventListener("mouseover", function() {
that.uploadInput.focus();
});
that.targetElement.addEventListener("click", function() {
that.uploadInput.focus();
});
that.targetElement.addEventListener("mouseleave", function() {
that.uploadInput.blur();
});
that.uploadInput.addEventListener('paste', function(e) {
that.handlePaste(e);
});
}
ctrlVUtil.prototype.mixinConfig = function(option){
this.targetElement = option.targetElement || document.querySelector(".js-upload");
this.uploadInput = this.createInputTarget();
this.isCompleteImg = "isCompleteImg" in option ? option.isCompleteImg : this.isCompleteImg;
this.uploadUrl = option.uploadUrl || this.uploadUrl;
this.data = option.data;
this.success = option.success || function(data) {
console.log(data);
};
this.error = option.error || function(error) {
console.log(error);
};
};
ctrlVUtil.prototype.createInputTarget = function() {
var imgContinaer = document.createElement("div");
imgContinaer.style.cssText = "border:none;margin:0;padding:0;font-size: 0;height:1px;width:1px;opacity:0;position:fixed;z-index:-1;";
imgContinaer.contentEditable = true;
imgContinaer.class = "ui-ctrlv-uploadInput";
this.targetElement.parentNode.insertBefore(imgContinaer, this.targetElement);
return imgContinaer;
};
ctrlVUtil.prototype.handlePaste = function(e){
var that = this;
if (e && e.clipboardData && e.clipboardData.items) {
var item = e.clipboardData.items[0],
that = this;
if (item.type.indexOf('image') != -1) {
var blob = item.getAsFile();
var fileReader = new FileReader();
fileReader.readAsDataURL(blob);
fileReader.addEventListener('load', function(e) {
var file = e.target.result;
that.send(file);
}, false);
} else {
layer.msg('请粘贴image类型!');
}
} else {
setTimeout(function() {
var $img = that.uploadInput.querySelector("img");
if ($img) {
that.send($img.src);
} else {
layer.msg('当前浏览器不支持剪贴板操作!');
return;
}
}, 200);
}
};
ctrlVUtil.prototype.send = function(imgcontent) {
layer.load();
var that = this;
that.uploadInput.innerHTML = "";
var data = that.data || {};
data.content = this.isCompleteImg ? imgcontent : imgcontent.split(';')[1].split(',')[1];
var xhr = new XMLHttpRequest();
xhr.open("post",that.uploadUrl,true);
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var ret = JSON.parse(xhr.responseText);
that.success && that.success(ret);
} else {
that.error && that.error(e, xhr);
}
}
};
xhr.onerror = function(e) {
that.error && that.error(e, xhr);
};
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var dataString = [];
for(var key in data){
dataString.push(key+"="+encodeURIComponent(data[key]));
}
xhr.send(dataString.join("&"));
};
ctrlVUtil.prototype.alertMsg = function(content){
alert(content);
}
return ctrlVUtil;
}));

9
static/index.js

@ -7,7 +7,6 @@
* *
*/ */
'use strict'; 'use strict';
(function(root, factory){ (function(root, factory){
@ -144,9 +143,8 @@
}, false); }, false);
} else { } else {
//that.alertMsg("请粘贴image类型");
that.alertMsg("请粘贴image类型"); layer.msg('请粘贴image类型!');
} }
// firefox无法使用items方法,在粘贴时,图片会作为img标签插入targetElement中, // firefox无法使用items方法,在粘贴时,图片会作为img标签插入targetElement中,
@ -159,7 +157,8 @@
if ($img) { if ($img) {
that.send($img.src); that.send($img.src);
} else { } else {
that.alertMsg("浏览器不支持剪贴板操作"); //that.alertMsg("浏览器不支持剪贴板操作");
layer.msg('当前浏览器不支持剪贴板操作!');
return; return;
} }

4
tpl/user/header.php

@ -14,7 +14,7 @@
<link rel="stylesheet" href="./static/layui/css/layui.css"> <link rel="stylesheet" href="./static/layui/css/layui.css">
<link rel="stylesheet" href="./static/style.css?v=1.3"> <link rel="stylesheet" href="./static/style.css?v=1.3">
<script src = "https://libs.xiaoz.top/clipBoard.js/clipBoard.min.js"></script> <script src = "https://libs.xiaoz.top/clipBoard.js/clipBoard.min.js"></script>
<script src = "./static/index.js"></script> <script src = "./static/ctrv-upload.js"></script>
</head> </head>
<body> <body>
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
@ -29,7 +29,7 @@
<li class="layui-nav-item"><a href="found.php"><i class="layui-icon">&#xe60d;</i> 探索发现</a></li> <li class="layui-nav-item"><a href="found.php"><i class="layui-icon">&#xe60d;</i> 探索发现</a></li>
<li class="layui-nav-item"><a href="sm.php"><i class="layui-icon">&#xe681;</i> SM.MS</a></li> <li class="layui-nav-item"><a href="sm.php"><i class="layui-icon">&#xe681;</i> SM.MS</a></li>
<li class="layui-nav-item"><a href="https://doc.xiaoz.me/#/imgurl/api" target = "_blank"><i class="layui-icon">&#xe653;</i> API</a></li> <li class="layui-nav-item"><a href="https://doc.xiaoz.me/#/imgurl/api" target = "_blank"><i class="layui-icon">&#xe653;</i> API</a></li>
<li class="layui-nav-item"><a href="https://doc.xiaoz.me/docs/imgurl" target = "_blank" rel = "nofollow"><i class="layui-icon">&#xe705;</i> 帮助文档</a></li> <li class="layui-nav-item"><a href="https://doc.xiaoz.me/#/imgurl/" target = "_blank" rel = "nofollow"><i class="layui-icon">&#xe705;</i> 帮助文档</a></li>
<li class="layui-nav-item"><a href="https://github.com/helloxz/imgurl" target = "_blank" rel = "nofollow"><i class="layui-icon">&#xe635;</i> 源码</a></li> <li class="layui-nav-item"><a href="https://github.com/helloxz/imgurl" target = "_blank" rel = "nofollow"><i class="layui-icon">&#xe635;</i> 源码</a></li>
<li class="layui-nav-item"><a href="about.php"><i class="layui-icon">&#xe60b;</i> 关于</a></li> <li class="layui-nav-item"><a href="about.php"><i class="layui-icon">&#xe60b;</i> 关于</a></li>
</ul> </ul>

Loading…
Cancel
Save