粘贴图片上传功能

发表于:2019-09-09 11:36

php,浏览器

热度:317

喜欢:1

粘贴图片并上传

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

html 复制代码

<!-- #editDiv标签的</div>之前必须没有内容，才能匹配空#editDiv:empty -->
<div id="editDiv" contenteditable='true'  placeholder='粘贴图片至此处'></div>
<div id="imgs"></div>

css 复制代码

#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模拟

javascript 复制代码

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}">`)
                        }
                    }
                })
            }
        }
    })

php 复制代码

$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);

markdown 复制代码

![截图](//static.nnnnzs.cn/upload/img/1813f4fea60c0f0d9383bd19011994c8.png)

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

php 复制代码

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

完结撒花