From 8f61a15b0c5fb5c92dcb5514694e1372b25acc6b Mon Sep 17 00:00:00 2001 From: xiaoz Date: Sat, 8 Sep 2018 22:37:45 +0800 Subject: [PATCH] test --- functions/cvupload.php | 58 +++++++++ miniup.html | 136 +++++++++++++++++++++ static/imgurl.js | 69 +++++++++++ static/index.js | 226 +++++++++++++++++++++++++++++++++++ static/paste-upload-image.js | 127 ++++++++++++++++++++ 5 files changed, 616 insertions(+) create mode 100644 functions/cvupload.php create mode 100644 miniup.html create mode 100644 static/imgurl.js create mode 100644 static/index.js create mode 100644 static/paste-upload-image.js diff --git a/functions/cvupload.php b/functions/cvupload.php new file mode 100644 index 0000000..f3a11f8 --- /dev/null +++ b/functions/cvupload.php @@ -0,0 +1,58 @@ +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); + +?> + \ No newline at end of file diff --git a/miniup.html b/miniup.html new file mode 100644 index 0000000..49654f6 --- /dev/null +++ b/miniup.html @@ -0,0 +1,136 @@ + + + + + ImgURL - 简单、纯粹的图床程序。 + + + + + + + + + + + + + + +
+
+
+
注意：您上传的图片将会公开显示，勿上传隐私图片。此项目依赖于：https://imgurl.org/
+ +
+
    +
  • ImgURL
    • +
  • SM.MS
    • +
+
+ +
+ +
+ +

点击上传，或将图片拖拽到此处

+
+ +
+ +
+
+ + + + +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/static/imgurl.js b/static/imgurl.js new file mode 100644 index 0000000..bcf19b5 --- /dev/null +++ b/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 = ''; + + //让层居中显示 + 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 = '
'; + $("body").append(fade); + } + + //关闭层 + window.closelayer = function(){ + $("#layer").hide(); + //showSidebar(); + $("#layer").remove(); + $("#fade").remove(); + } + + //创建一个显示按钮 + function imgurl(){ + //var imgButton = layerstart; + //imgButton += ''; + //imgButton += layerend; + //$("body").append(); + $("body").append('
'); + } + //显示上传按钮 + window.showImgurl = function(){ + var up = layerstart; + up += ''; + up += layerend; + $("body").append(up); + + $("#layer").show(); + + //显示遮罩 + keepout(); + //居中显示层 + layerCenter(); + } + + imgurl(); +})(); \ No newline at end of file diff --git a/static/index.js b/static/index.js new file mode 100644 index 0000000..d6d2eda --- /dev/null +++ b/static/index.js @@ -0,0 +1,226 @@ +/*! + * + * @author: diandian & alanzhang + * @date: 2016/8/19 + * @overview: [截屏后，按粘贴快捷键ctrl+v上传，] + * @兼容性说明： IE11，Firefox，chrome + * + */ + + +'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; +})); + + + diff --git a/static/paste-upload-image.js b/static/paste-upload-image.js new file mode 100644 index 0000000..0d1c5b0 --- /dev/null +++ b/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);