TinyMCE用PHP处理批量上传多张图片和裁剪编辑后的保存

主要实现的功能是TinyMCE富文本编辑器用PHP处理后台上传的单张图片、批量上传多张图片、以及图片被裁剪翻转编辑后用PHP保存的方法。

网上关于如何处理TinyMCE单张上传图片，或是批量上传，再或是修改后的图片保存用PHP都好实现，但将三者放在一起应用的还真是没有，经过几天的测试终于实现了TinyMCE编辑器采用PHP后台保存单张、批量、编辑保存图片的功能代码，而且图片修改保存后都是覆盖保存，不会像网上示例那种编辑10次就生成10张图，我这个例子只保存1张图片，代码就分享在李雷PHP博客了，用的拿走。

tinymce.init配置：

//单图和多图上传，截取图片后保存，跨域编辑图片不能操作
    images_upload_base_path: '',
    images_reuse_filename: true,//保持同一个图片名字，用于原图片编辑后知道同名可覆盖
    images_upload_handler: lilei_image_upload_handler,

处理上传图片和编辑图片保存的函数:

function lilei_image_upload_handler (blobInfo, succFun, failFun) {//自定义插入图片函数  blobInfo: 本地图片blob对象, succFun(url|string)： 成功回调（插入图片链接到文本中）, failFun(string)：失败回调
        var xhr, formData;
        var file = blobInfo.blob();//转化为易于理解的file对象
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'upload_image.php');
            xhr.onload = function() {
            var json;
            //网络不通
            if (xhr.status != 200) {
                failFun('通讯异常: ' + xhr.status);
                return;
            }else{
                json = JSON.parse(xhr.responseText);//接收返回的JSON数据
                if (!json) {
                    failFun('上传图片失败: ' + xhr.responseText);
                    return;
                }else{
                    if (json.code== 'success') {
                        succFun(json.location);
                        //console.log(json.location)
                    } else {
                        failFun('【上传失败】：' + json.message);
                    }
                }
            }
        };
        xhr.onerror = function () {
            failFun('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
        };
        formData = new FormData();
        if (!blobInfo.blob()['name']){//批量多图上传与图片编辑对象互斥，这里是非常重要的，网上多数都没有这点说明，也就不能实现批量上传图片与图片编辑后的保存兼容
            //console.log( blobInfo.filename())
            formData.append('file', file, blobInfo.filename() );
        }else{
            formData.append('file', file, blobInfo.blob()['name'] );
            //console.log( blobInfo.blob()['name']) 
        }
        xhr.send(formData);
}

upload_image.php代码：

<?php
header("Content-Type: text/html;charset=GB2312");
header("Cache-control: private"); //开启网页表单缓存
date_default_timezone_set ("PRC");//设置时区
set_time_limit(0);
ini_set('memory_limit','128M');
error_reporting(0);
function fileext($filename){
    return substr(strrchr($filename, '.'), 1);
}
 
if ($_FILES["file"]["error"] !=4){//有文件
    $uppath="upload_file/image/".date("Y")."/";  //目录只能逐级检查并建立
    if(!file_exists($uppath)){
        mkdir($uppath,0777); //新建目录
        chmod($uppath,0777); //附加权限
    }
    $uppath=$uppath.date("m")."/";  //目录只能逐级检查并建立
    if(!file_exists($uppath)){
        mkdir($uppath,0777); //新建目录
        chmod($uppath,0777); //附加权限
    }
    $uppath=$uppath.date("d")."/";
    if(!file_exists($uppath)){
        mkdir($uppath,0777); //新建目录
        chmod($uppath,0777); //附加权限
    }
    $type=array("image/jpeg","image/pjpeg", "image/png","image/x-png", "image/gif");//设置允许上传文件的类型 "jpeg","png"，后面image/png是为了兼容blob图片
    //备注：
    //blob文件截取后，返回为：blob,blob,image/png,C:\Windows\Temp\php11E0.tmp,0,337430
    if(!in_array($_FILES['file']['type'],$type)){//普通后缀 && blob格式图片
        echo '{"code":"error","message":"图片文件类型错误"}';
        exit;
    }
    
    if ($_FILES["file"]["size"] > 5*1024*1024){//20M
        echo '{"code":"error","message":"图片超过大小限制"}';
        exit;
    }
    
    $rand_name=md5(microtime().'-'.rand(1,9999999999));
    
    //用于imagetools工具，编辑图片后原图覆盖，避免改动一下就传一张新图
    if (!file_exists($uppath.$_FILES["file"]["name"])){//判断当前路径下是否有此文件
        $filePath =$uppath.md5($rand_name."19jp.com").".".strtolower(fileext($_FILES['file']['name']));
    }else{
        $filename=$_FILES["file"]["name"];//存在，用原路径覆盖
        $filePath =$uppath.$filename;
    }
    
    if ($_FILES["file"]["error"] > 0){
        echo '{"code":"error","message":"'.$_FILES["file"]["error"].'"}';
        exit;
    }else{
        move_uploaded_file($_FILES["file"]["tmp_name"],$filePath);
        echo '{"code":"success","location":"'.$filePath.'"}';
        exit;
    }
}
?>

以上就是TinyMCE用PHP处理批量上传多张图片和裁剪编辑后的保存的详细内容，更多关于TinyMCE用PHP处理批量上传多张图片和裁剪编辑后的保存的资料请关注九品源码其它相关文章！