Browse Source

test

pull/16/head
xiaoz 6 years ago
parent
commit
8f61a15b0c
  1. 58
      functions/cvupload.php
  2. 136
      miniup.html
  3. 69
      static/imgurl.js
  4. 226
      static/index.js
  5. 127
      static/paste-upload-image.js

58
functions/cvupload.php

@ -0,0 +1,58 @@
<?php
//载入配置文件
include_once("./class/class.user.php");
//检查用户是否登录
$status = $basis->check($config);
//检查用户是否登陆来判断上传目录
if($status == 'islogin') {
//设置上传路径
$updir = $config['admindir'];
}
else{
$updir = $config['userdir'];
//限制用户上传数量
$basis->limitnum();
}
//获取上传者信息
$ip = $basis->getip();
$ua = $_SERVER['HTTP_USER_AGENT'];
$date = date('Y-m-d',time());
//图片存储路径
$picpath = $updir.'/'.date('ym',time()).'/'.'dsdds.png';
//接受base64图片
$picfile = $_POST['content'];
$picfile = base64_decode($picfile);
//echo $picfile;
//存储图片
var_dump(file_put_contents("D:/wwwroot/imgurl/upload/1809/dsd.png", $picfile));
//echo $picpath;
//var_dump($picfile);
?>
<?php
function base64_image_content($base64_image_content,$path){
//匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2];
$new_file = $path."/".date('Ymd',time())."/";
if(!file_exists($new_file)){
//检查是否有该文件夹,如果没有就创建,并给予最高权限
mkdir($new_file, 0700);
}
$new_file = $new_file.time().".{$type}";
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
return '/'.$new_file;
}else{
return false;
}
}else{
return false;
}
}
?>

136
miniup.html

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ImgURL - 简单、纯粹的图床程序。</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="xiaoz.me" />
<meta name="keywords" content="ImgURL,免费图床,图床程序,小z图床,XZ Pic" />
<meta name="description" content="ImgURL是一个简单、纯粹的图床程序,让个人图床多一个选择。" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="Bookmark" href="favicon.ico" />
<link rel="stylesheet" href="./static/layui/css/layui.css">
<link rel="stylesheet" href="./static/style.css?v=1.2">
<script src = "https://libs.xiaoz.top/clipBoard.js/clipBoard.min.js"></script>
<style type="text/css" media="screen" id="test">
#imgbtn{
display: none;
}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-lg12 layui-col-xs12">
<div class="msg"><i class="layui-icon">&#xe645;</i> 注意:您上传的图片将会公开显示,勿上传隐私图片。此项目依赖于:<a href="https://imgurl.org/" target = "_blank">https://imgurl.org/</a></div>
<!--选项卡测试-->
<div class="layui-tab layui-tab-brief" lay-filter="uptab">
<ul class="layui-tab-title">
<li class="layui-this">ImgURL</li>
<li>SM.MS</li>
</ul>
<div class="layui-tab-content">
<!--上传到ImgURL-->
<div class="layui-tab-item layui-show">
<!-- 上传图片表单 -->
<div class="layui-upload-drag" id="upimg">
<i class="layui-icon">&#xe67c;</i>
<p>点击上传,或将图片拖拽到此处</p>
</div>
<!-- 上传图片表单END -->
</div>
<!--上传到sm.ms-->
<div class="layui-tab-item">
<div class = "smfile">
<a href="javascript:;" class="file">
<input type="file" name="smfile" id="sm">
<i class="layui-icon" style = "font-size:6em;">&#xe67c;</i>
</a>
</div>
</div>
</div>
</div>
<!--选项卡END-->
</div>
</div>
<div style = "clear:both;"></div>
<!-- 图片上传成功 -->
<div class="layui-row" id = "upok" style = "margin-top:1em;">
<div>
<div id="showpic" class = "layui-col-lg5"><a href="" target = "_blank"><img src=""></a></div>
<div id="piclink" class = "layui-col-lg6 layui-col-md-offset1">
<table class="layui-table" lay-skin="nob">
<colgroup>
<col width="80">
<col width="400">
<col>
</colgroup>
<tbody>
<tr>
<td>URL</td>
<td><input type="text" class="layui-input" id = "url"></td>
<td><a href="javascript:;" class = "layui-btn layui-btn-sm" onclick = "copy('url')">复制</a></td>
</tr>
<tr>
<td>HTML</td>
<td><input type="text" class="layui-input" id = "html"></td>
<td><a href="javascript:;" class = "layui-btn layui-btn-sm" onclick = "copy('html')">复制</a></td>
</tr>
<tr>
<td>MarkDown</td>
<td><input type="text" class="layui-input" id = "markdown"></td>
<td><a href="javascript:;" class = "layui-btn layui-btn-sm" onclick = "copy('markdown')">复制</a></td>
</tr>
<tr>
<td>BBcode</td>
<td><input type="text" class="layui-input" id = "bbcode"></td>
<td><a href="javascript:;" class = "layui-btn layui-btn-sm" onclick = "copy('bbcode')">复制</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 图片上传成功END -->
</div>
<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/layui/layui.js"></script>
<script src="./static/embed.js?v=1.2"></script>
<script>
//隐藏按钮
//setTimeout('$("#imgbtn").remove()',100)
layui.use(['element'],function(){
var element = layui.element;
element.on('tab(uptab)', function(data){
//console.log(this); //当前Tab标题所在的原始DOM元素
//console.log(data.index); //得到当前Tab的所在下标
//console.log(data.elem); //得到当前的Tab大容器
});
});
var load1 = document.querySelector("body");
// 实例化即可
new ctrlVUtil({
uploadUrl: "functions/cvupload.php",
targetElement: load1,
isCompleteImg:false,
data:{
name:"alanzhang"
},
success:function(data){
alert("上传成功");
console.log(data);
},
error: function(error){
alert("上传失败");
}
});
</script>
</body>
</html>

69
static/imgurl.js

@ -0,0 +1,69 @@
// ==UserScript==
// @name ImgURL上传脚本
// @namespace https://imgurl.org/
// @version 0.1
// @description ImgURL快捷上传工具
// @author xiaoz.me
// @match http://*/*
// @match https://*/*
// @license GPL
// @grant none
// ==/UserScript==
(function() {
'use strict';
//定义一个全局弹出层
window.layerstart = '<div id = "layer" style = "box-shadow: 1px 1px 2px #888888;border-radius:5px;top:0em;left:0;width:1280px;height:720px;background-color:#FFFFFF;position:fixed;z-index:999;display:none;border:1px solid #d2d2d2">';
layerstart += '<div style="text-align:right;padding:0.8em;border-bottom:1px solid #d2d2d2;"><a href="javascript:;" onclick="closelayer()" style="color:#FFFFFF;background-color:#FF5722;width:80px;text-align:center;padding:0.5em;border-radius:2px;padding-left:1em;padding-right:1em;">关闭</a></div>';
window.layerend = '</div>';
//让层居中显示
window.layerCenter = function(){
var bwidth = window.screen.availWidth;
var bheight = window.screen.availHeight;
var layertop = (bheight - 720) / 2;
var layerleft = (bwidth - 1280) / 2;
//改变css
$("#layer").css({"top":layertop,"left":layerleft});
}
//创建一个遮罩层
window.keepout = function(){
var fade = '<div id = "fade" style = "width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position: fixed;left: 0;top: 0;z-index: 99;" onclick = "closelayer()"></div>';
$("body").append(fade);
}
//关闭层
window.closelayer = function(){
$("#layer").hide();
//showSidebar();
$("#layer").remove();
$("#fade").remove();
}
//创建一个显示按钮
function imgurl(){
//var imgButton = layerstart;
//imgButton += '<iframe src = "http://localhost/imgurl/miniup.html" width="100%" height="660px" frameborder="0"></iframe>';
//imgButton += layerend;
//$("body").append();
$("body").append('<div id = "imgbtn" style = "position:fixed;right:1em;bottom:1em;z-index:88;cursor:pointer;" onclick = "showImgurl()"><img src = "https://libs.xiaoz.top/material/image.png" width = "36px" height = "36px" /></div>');
}
//显示上传按钮
window.showImgurl = function(){
var up = layerstart;
up += '<iframe src = "https://imgurl.org/miniup.html" width="100%" height="660px" frameborder="0"></iframe>';
up += layerend;
$("body").append(up);
$("#layer").show();
//显示遮罩
keepout();
//居中显示层
layerCenter();
}
imgurl();
})();

226
static/index.js

@ -0,0 +1,226 @@
/*!
*
* @author: diandian & alanzhang
* @date: 2016/8/19
* @overview: [截屏后按粘贴快捷键ctrl+v上传]
* @兼容性说明 IE11Firefoxchrome
*
*/
'use strict';
(function(root, factory){
if (typeof define === 'function' && define.amd) {
// AMD
define([], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS-like
module.exports = factory();
} else {
// Browser globals (root is window)
root.ctrlVUtil = factory();
}
}(this, function(){
function ctrlVUtil(option){
// 鼠标在该元素上,使用ctrl+v键时上传
this.targetElement = null;
// 用于响应paste事件的元素,如果页面不传递,则创建该元素,并位于targetElement前面
this.uploadInput = null;
// 默认的上传地址
this.uploadUrl = "http://www.oa.com/screenshot/create-file";
// 对于读取的图片base64,前缀为data:image/jpg;base64,base64content
// isCompleteImg为false则去掉前缀直接上传内容部分,为true则上传完整的base64字符串
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();
});
// 移除鼠标则input失去交掉
that.targetElement.addEventListener("mouseleave", function() {
that.uploadInput.blur();
});
// 监听paste的事件
that.uploadInput.addEventListener('paste', function(e) {
that.handlePaste(e);
});
}
/**
* [mixinConfig 整合参数]
* @param {[type]} option [description]
* @return {[type]} [description]
*/
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);
};
};
/**
* [createInputTarget 创建div元素用于响应paste事件]
* @return {Element} [description]
*/
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;";
// 让其可编辑,能响应paste事件
imgContinaer.contentEditable = true;
imgContinaer.class = "ui-ctrlv-uploadInput";
// 插入targeElementn前面
this.targetElement.parentNode.insertBefore(imgContinaer, this.targetElement);
return imgContinaer;
};
/**
* [handlePaste 处理粘贴行为]
* @param {Event} e [粘贴事件]
* @return {[type]} [description]
*/
ctrlVUtil.prototype.handlePaste = function(e){
var that = this;
// webkit 内核支持items方法
if (e && e.clipboardData && e.clipboardData.items) {
// 获取item
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 {
that.alertMsg("请粘贴image类型");
}
// firefox无法使用items方法,在粘贴时,图片会作为img标签插入targetElement中,
// 获取img标签的src内容进行上传
} else {
setTimeout(function() {
var $img = that.uploadInput.querySelector("img");
if ($img) {
that.send($img.src);
} else {
that.alertMsg("浏览器不支持剪贴板操作");
return;
}
}, 200);
}
};
/**
* [send 上传图片]
* @param {string} imgcontent [图片内容base64格式]
* @return {[type]} [description]
*/
ctrlVUtil.prototype.send = function(imgcontent) {
var that = this;
that.uploadInput.innerHTML = "";
var data = that.data || {};
// 根据sCompleteImg来决定上传的是整体的base64字符串还是仅仅为内容部分
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;
}));

127
static/paste-upload-image.js

@ -0,0 +1,127 @@
(function ($) {
var $this;
var $ajaxUrl = '';
$.fn.pasteUploadImage = function (ajaxUrl) {
$this = $(this);
$ajaxUrl = ajaxUrl;
$this.on('paste', function (event) {
var filename, image, pasteEvent, text;
pasteEvent = event.originalEvent;
if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
image = isImage(pasteEvent);
if (image) {
event.preventDefault();
filename = getFilename(pasteEvent) || "image.png";
text = "{{" + filename + "(uploading...)}}";
pasteText(text);
return uploadFile(image.getAsFile(), filename);
}
}
});
$this.on('drop', function (event) {
var filename, image, pasteEvent, text;
pasteEvent = event.originalEvent;
if (pasteEvent.dataTransfer && pasteEvent.dataTransfer.files) {
image = isImageForDrop(pasteEvent);
if (image) {
event.preventDefault();
filename = pasteEvent.dataTransfer.files[0].name || "image.png";
text = "{{" + filename + "(uploading...)}}";
pasteText(text);
return uploadFile(image, filename);
}
}
});
};
pasteText = function (text) {
var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
caretStart = $this[0].selectionStart;
caretEnd = $this[0].selectionEnd;
textEnd = $this.val().length;
beforeSelection = $this.val().substring(0, caretStart);
afterSelection = $this.val().substring(caretEnd, textEnd);
$this.val(beforeSelection + text + afterSelection);
$this.get(0).setSelectionRange(caretStart + text.length, caretEnd + text.length);
return $this.trigger("input");
};
isImage = function (data) {
var i, item;
i = 0;
while (i < data.clipboardData.items.length) {
item = data.clipboardData.items[i];
if (item.type.indexOf("image") !== -1) {
return item;
}
i++;
}
return false;
};
isImageForDrop = function (data) {
var i, item;
i = 0;
while (i < data.dataTransfer.files.length) {
item = data.dataTransfer.files[i];
if (item.type.indexOf("image") !== -1) {
return item;
}
i++;
}
return false;
};
getFilename = function (e) {
var value;
if (window.clipboardData && window.clipboardData.getData) {
value = window.clipboardData.getData("Text");
} else if (e.clipboardData && e.clipboardData.getData) {
value = e.clipboardData.getData("text/plain");
}
value = value.split("\r");
return value[0];
};
getMimeType = function (file, filename) {
var mimeType = file.type;
var extendName = filename.substring(filename.lastIndexOf('.') + 1);
if (mimeType != 'image/' + extendName) {
return 'image/' + extendName;
}
return mimeType
};
uploadFile = function (file, filename) {
var formData = new FormData();
formData.append('imageFile', file);
formData.append("mimeType", getMimeType(file, filename));
$.ajax({
url: $ajaxUrl,
data: formData,
type: 'post',
processData: false,
contentType: false,
dataType: 'json',
xhrFields: {
withCredentials: true
},
success: function (data) {
if (data.success) {
return insertToTextArea(filename, data.message);
}
return replaceLoadingTest(filename);
},
error: function (xOptions, textStatus) {
replaceLoadingTest(filename);
console.log(xOptions.responseText);
}
});
};
insertToTextArea = function (filename, url) {
return $this.val(function (index, val) {
return val.replace("{{" + filename + "(uploading...)}}", "![" + filename + "](" + url + ")" + "\n");
});
};
replaceLoadingTest = function (filename) {
return $this.val(function (index, val) {
return val.replace("{{" + filename + "(uploading...)}}", filename + "\n");
});
};
})(jQuery);
Loading…
Cancel
Save