From 7781d20812446841ad1bfb170852d4832bd6a695 Mon Sep 17 00:00:00 2001
From: xiaoz <xiaoz93@outlook.com>
Date: Fri, 14 Sep 2018 18:50:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md             |  19 ++++---
 miniup.html           |   2 +-
 static/ctrv-upload.js | 112 ++++++++++++++++++++++++++++++++++++++++++
 static/index.js       |   9 ++--
 tpl/user/header.php   |   4 +-
 5 files changed, 131 insertions(+), 15 deletions(-)
 create mode 100644 static/ctrv-upload.js

diff --git a/README.md b/README.md
index 9daa601..cbd0450 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,12 @@ ImgURL是一款简单、纯粹的图床程序，使用PHP + SQLite 3开发，不
 * 需要exif函数支持
 * 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] 一键生成链接
@@ -14,6 +20,7 @@ ImgURL是一款简单、纯粹的图床程序，使用PHP + SQLite 3开发，不
 - [x] 图片压缩
 - [x] 图片鉴黄
 - [x] API上传
+- [x] 油猴脚本上传
 - [ ] 图片水印
 
 
@@ -26,6 +33,7 @@ ImgURL是一款简单、纯粹的图床程序，使用PHP + SQLite 3开发，不
 * 优化“探索发现”，之前为随机显示12张，现在显示本月所有图片（流加载）
 * 优化后台“看图模式”
 * 修复一些BGU，优化CSS
+* 增加ImgURL脚本，可在任意网页上传图片，参考：[https://www.xiaoz.me/archives/11038](https://www.xiaoz.me/archives/11038)
 
 #### v1.2 - 2018.08.11
 * 增加URL批量上传
@@ -40,21 +48,18 @@ ImgURL是一款简单、纯粹的图床程序，使用PHP + SQLite 3开发，不
 * 优化IP获取，及其它细节优化
 * 修复一些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`
 * Apache默认已经通过`.htaccess`文件来屏蔽数据库下载
 * Nginx用户请在server段内添加如下配置，并重启Nginx
-```
+```nginx
 location ~* \.(db3)$ {  
     deny all;  
 } 
+location ~* ^/(temp|upload)/.*.(php|php5)$ {
+    return 444;
+}
 ```
 
 ### Demo
diff --git a/miniup.html b/miniup.html
index b00eeff..67ca639 100644
--- a/miniup.html
+++ b/miniup.html
@@ -128,7 +128,7 @@
 
   <div style = "clear:both;"></div>
     <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/embed.js?v=1.2"></script>
 	<script>
diff --git a/static/ctrv-upload.js b/static/ctrv-upload.js
new file mode 100644
index 0000000..8c96702
--- /dev/null
+++ b/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;
+}));
\ No newline at end of file
diff --git a/static/index.js b/static/index.js
index 5142791..d1715e0 100644
--- a/static/index.js
+++ b/static/index.js
@@ -7,7 +7,6 @@
  *
  */
 
-
 'use strict';
 
 (function(root, factory){
@@ -144,9 +143,8 @@
                 }, false);
 
             } else {
-
-                that.alertMsg("请粘贴image类型");
-
+                //that.alertMsg("请粘贴image类型");
+                layer.msg('请粘贴image类型！');
             }
 
         // firefox无法使用items方法，在粘贴时，图片会作为img标签插入targetElement中，
@@ -159,7 +157,8 @@
                 if ($img) {
                     that.send($img.src);
                 } else {
-                    that.alertMsg("浏览器不支持剪贴板操作");
+                    //that.alertMsg("浏览器不支持剪贴板操作");
+                    layer.msg('当前浏览器不支持剪贴板操作！');
                     return;
                 }
 
diff --git a/tpl/user/header.php b/tpl/user/header.php
index 906d001..332fc38 100644
--- a/tpl/user/header.php
+++ b/tpl/user/header.php
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="./static/layui/css/layui.css">
     <link rel="stylesheet" href="./static/style.css?v=1.3">
     <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>
 <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="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/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="about.php"><i class="layui-icon">&#xe60b;</i> 关于</a></li>
                         </ul>