TinyMCE用Ajax上传多附件插件及后台PHP接收存储文件的示例

TinyMCE多附件上传（attachment插件）官方虽然有示例，但没有具体的PHP后端接收采用Ajax方法POST过来的文件或图片数据及验证和存储的示例代码。网上也是找了很多，关于PHP与TinyMCE配合使用的例子太少而且分享的代码也很混乱，讲不到点儿上，所以再懒也只能自己动手，经过几次优化此插件达到了自己想要的效果。

改进后：

1.上传返回结果中增加了失败的提示，有弹出对话框和红色删除线；

2.多附件上传改进了堆叠在一起的效果，改为以段落方式一行一个附件，看上去内容整齐；

3.增加了PHP接收数据并存储数据的示例代码；

具体配置方式及PHP代码如下：

A、初始化tinymce.init，其他插件自行补充

tinymce.init({
    plugins: "attachment",....
    toolbar: [
    'attachment' ...

B、核心处理上传附件的JS代码：

//附件上传
//attachment_max_size: 20 * 1024 * 1024,//20M  //取消这里的提示，用PHP程序反馈结果
attachment_assets_path: 'plugins/attachment/icons',
attachment_upload_handler: function(file, succFun, failFun, progressCallback) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: 'POST',
        url: 'upload_file.php',//此文件在后面给出
        //header:{'Content-Type':'multipart/form-data'},
        dataType: 'json',
        async: false,
        //这是重要的一步，防止重复提交的     
        cache: false,
        //设置为false，上传文件不需要缓存。
        contentType: false,
        //设置为false,因为是构造的FormData对象,所以这里设置为false。
        processData: false,
        //设置为false,因为data值是FormData对象，不需要对数据做处理。
        xhr: xhrOnProgress(function(e) {
            const percent = (e.loaded / e.total * 100 | 0) + '%'; //计算百分比
            progressCallback(percent);
        }),
    }).then(function(data) {
        if (data.code == 'success') {
            succFun(data.data);
        } else {
            failFun('【上传失败】：' + data.data);
            tinymce.activeEditor.notificationManager.open({ //success 成功info 普通信息warning 警告信息error 错误信息
                text: '有部分附件上传失败，请您确认！',
                type: 'error',
                timeout: 5000,
                closeButton: true,
            });
        }
    }).fail(function(data) {
        failFun('【上传异常】：' + data.data)
    });
},

C、PHP后台处理代码（upload_file.php）：

<?php
function fileext($filename){ 
    return substr(strrchr($filename, '.'), 1); 
}

if ($_FILES["file"]["error"] !=4){//有文件
    $uppath="upload_file/file/".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("gif", "jpg", "jpeg", "png", "pdf", "txt", "zip", "rar", "7z", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "mp3", "mp4");//设置允许上传文件的类型 "jpeg","png"
    
    if(!in_array(strtolower(fileext($_FILES['file']['name'])),$type)){
        echo '{"code":"error","data":"文件类型错误"}';
        exit;
    }
    
    if ($_FILES["file"]["size"] > 2*1024*1024){//20M
        echo '{"code":"error","data":"附件超过大小限制"}';
        exit;
    }
    
    $filename=md5(time());
    $filePath =$uppath.md5($filename."mdaima.com").".".fileext($_FILES['file']['name']);
    if ($_FILES["file"]["error"] > 0){
        echo '{"code":"error","data":"'.$_FILES["file"]["error"].'"}';
        exit;
    }else{
        move_uploaded_file($_FILES["file"]["tmp_name"],$filePath);
        echo '{"code":"success","data":"'.$filePath.'"}';
        exit;
    }
}
?>

最后将attachment插件修改后的文件附上链接：

链接：https://pan.baidu.com/s/1GtZVMpIt-LdGxm3FjE-Bcg?pwd=qgqm 

提取码：qgqm