粘贴图片并上传

最近在写博客的时候,纯MarkDown语法写,但是发现图片是个需求,需要经常截图并且写到MarkDown里面
之前的做法是用QQ截图,然后另存为到本地桌面,然后再上传,返回URI地址,贴到博客编辑器里面
最近发现有些页面支持图片粘贴上传的功能,研究了一番

1
2
3
<!-- #editDiv标签的</div>之前必须没有内容,才能匹配空#editDiv:empty -->
<div id="editDiv" contenteditable='true' placeholder='粘贴图片至此处'></div>
<div id="imgs"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#editDiv{
color:black;
width:100px;
height:100px;
border: 1px solid red;
margin: 20px 50%;
}
#editDiv:empty:before{
/* 标签闭合的时候,设置content,内容为attr placeholder里面的内容 */
content: attr(placeholder);
color:red;
}
/*焦点时内容为空*/
#editDiv:focus:before{
content:none;
}

这里有个浏览器属性,contenteditable,表示标签可以编辑,不能用input和textarea,因为input、textarea中只能接受字符串,对于html标签不进行转义以及渲染。
图片上传的是blob类型的流文件,固用div模拟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let editDiv = document.getElementById('editDiv');//获取到粘贴图片的框
editDiv.addEventListener('paste',function(e){ //浏览器事件,paste表示粘贴内容
let cbd = e.clipboardData;//粘贴的内容,在控制台打印出来长度是0,但是实际上items可以用
for(let i=0;i<cbd.items.length;i++){
let item = cbd.items[i];
if(item.kind == "file"){
let blob = item.getAsFile();//粘贴数据的原生方法,转换成blob
let data = new FormData();
data.append('file', blob);//data就是一个二进制流
$.ajax({
url:'/upload.php',
type:'post',//
contentType: false,//不默认设置格式
processData: false,//不序列化,才能将blob文件发送过去
dataType:'json',//返回数据的类型
data:data,
success(res){
// res = {
// code: 1000
// content: "//static.nnnnzs.cn/upload/img/d2854133118bf60bc1e0d9fdc690bf35.png"
// msg: "上传成功"
// }
console.log(res.content)
if(res.code===1000){
$('#imgs').append(`<img src="${res.content}">`)
}
}
})
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$requestScheme = $_SERVER['REQUEST_SCHEME']; //协议
$host = $_SERVER['SERVER_NAME']; //同机器部署,
$baseUrl = $requestScheme . '://' . $host;

if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
} else if($_FILES["file"]) {
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp); // 获取文件后缀名
$fileType = $_FILES["file"]["type"];

//默认
$fileUrl = $baseUrl . "/upload/" . $_FILES["file"]["name"];//外网绝对路径
$absUrl = "upload/" . $_FILES["file"]["name"];//相对当前站点的路径

//如果是图片,文件名是md5
if(substr($fileType,0,5)==='image'){
$fileFullName = md5_file($_FILES["file"]["tmp_name"]).'.'.$extension;
$fileUrl = $baseUrl . "/upload/img/" . $fileFullName;
$absUrl = "upload/img/" .$fileFullName;
}
//移动到站点文件夹
move_uploaded_file(
$_FILES["file"]["tmp_name"],
$absUrl
);
$result = array('code' => 1000, 'content' => $fileUrl, 'msg' => '上传成功');
echo json_encode($result);
1
![截图](//static.nnnnzs.cn/upload/img/1813f4fea60c0f0d9383bd19011994c8.png)

其实在php文件里面,写了两套代码,当时浏览器访问的时候,get请求,返回页面渲染
post请求的时候,就是图片上传的代码

1
2
3
4
5
6
$method = $_SERVER["REQUEST_METHOD"];
if($method=='POST'){
//接口
}else{
//返回html页面
}

截图

完结撒花

相关文章
评论
分享
  • 微任务宏任务

    微任务队列宏任务队列 javascript是单线程,多线程都是模拟出来的, script、setTimeOut、setInterval是宏任务 Promise,process.nextTick是微任务 setTimeOut是n毫...

    微任务宏任务
  • functionalTemplate

    在使用iview表格的时候,定制组件,需要用到renderHeader API,看了一下如何传入render函数,结果惊为天人 12345678910111213141516export default { name:...

    functionalTemplate
  • 罗盘时钟

    罗盘时钟不刷抖音但是最近也听说了有很火的罗盘时钟,废话不多说直接上代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445...

    罗盘时钟
  • 如何判定我点了margin?

    这个世界上唯有两样东西能让我们的心灵感到深深的震撼:一是我们头顶上灿烂的星云,二是我们心中崇高的道德法则。 one - 康德 前言页面的绑定事件都是绑定在DOM元素上的,诸如此类 123document.getElementById(...

    如何判定我点了margin?
  • 自动微信读书

    前言最近在学习ReactNative,真机调试的时候安装的ADB调试工具,突发奇想,既然PC可以操控手机,是不是可以做一些懒得做的事情 流程 通过USB链接真机调试 执行wifi调试 123adb tcpip 5555adb co...

    自动微信读书
  • docker-Dockerfile篇

    什么是DockerfileDockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明,相当于快速构建时候的脚本文件 获取images 首先明确需要获取的image版本,以目前LTS的nodejs版...

    docker-Dockerfile篇
  • Docker-安装篇

    what is DockerDocker 是一个开源的应用容器引擎换句话说就是运行的系统里的虚拟机,可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。优点是容...

    Docker-安装篇
  • 初探electron

    什么是 electron使用html、css、javascipt、nodejs来编写跨平台的客户端程序,可以使windows、linux、macos 优点一次代码编写,多端打包 起步

    初探electron
  • 记一次sql性能优化

    有个小需求,在表里根据页码和页数查询,并排序,很简单,3秒就写出的sql 1select * from newslist order by id desc limit ${(currPage - 1) * pageSize&...

    记一次sql性能优化
  • 花式log

    各种控制台输出常见的控制台打印123456console.log() // 打印日志console.debug() // 打印调试console.error() // 打印错误console.info() // 打印信息...

    花式log