PHPCMS 9.6.3因浏览器不支持flash而不能上传图片的解决方法

Step1 在PHPCMS根目录下简历一个文件叫upload.php, 内容如下

<?php
define("SVR","http://phpcms.class4ever.com");//在此设置phpcms网址
define("TABLE_NAME","v9_attachment");//在此设置phpcms数据库中保存附件的表的名

/*功能：上传图片，然后链式运行addToBase()把图片加入图库*/
function editupimgs($file_info,  $server)
{
	$subDir='phpuploader';
	$dir = "uploadfile/{$subDir}/";
    $suffix = substr(strrchr($file_info['name'], '.'), 1);//文件扩展名
    $filesize=$file_info['size'];//文件大小
 
    //检测扩展名是否符合要求
    $allowedSuffix=array('png','jpg','jpeg','gif','webp');//允许的文件名类型
    if(!in_array(strtolower($suffix),$allowedSuffix)){
    	$msg[0]='wrongSuffix';
    	return $msg;
    }
    
    //检测通过后开始保存操作
    $file_error = $file_info['error'];
    if (!is_dir($dir)) //判断目录是否存在
    {
        mkdir($dir, 0777, true); //如果目录不存在则创建目录
    };
    $fileOldName= $file_info['name'];//原文件名
    
    $file = $dir . $fileOldName;//当原文件名与服务器生成的文件名相同时，禁止上传
    $filename = time() . rand(111111, 999999);
    $preFilename=$filename . '.' . $suffix;//随机生成新的文件名
    $filepathInDb=$subDir.'/'.$preFilename;//在数据库中保存的路径
    
    $pathfiles = $dir . $preFilename;
    if (!file_exists($file)) {
        if ($file_error == 0) {
            if (move_uploaded_file($file_info["tmp_name"], $pathfiles)) {
                $arr['msg'] = "上传成功";
            } else {
                $arr['msg'] = "上传失败";
            }
        } else {
            $arr['msg'] = "上传失败";
        }
    } else {
        $arr['code'] = "1";
        $arr['msg'] = "当前目录中，文件" . $file . "已存在";
    }
    //初始化返回数组
    $arr = array(
        'code' => 0,
        'msg' => '',
        'data' => array(
            'src' => $server . '/' . $pathfiles,
            'dir' => $dir,
            'file' => $filename . '.' . $suffix,
        ),
    );
    
    //并且把图片加入图库
    addToBase($fileOldName,$filepathInDb,$filesize,$suffix);
    return $arr;
}

/*功能：把上传的图片保存到数据库的图库里面*/
function addToBase($filename,$filepath,$filesize,$fileext){
	//取得数据库设置
	$dbUser=require('caches/configs/database.php');
	$dbUser=$dbUser['default'];
	$host=$dbUser['hostname'];
	$dbName=$dbUser['database'];
	$password=$dbUser['password'];
	$dbUsername=$dbUser['username'];
	$dsn = "mysql:host={$host};dbname={$dbName}";
	
	//连接数据库
	$pdo = new PDO ($dsn,$dbUsername,$password);//创建一个连接对象
	$pdo->exec('set names utf8');//设置编码

	try{
		$sql="INSERT INTO `". constant('TABLE_NAME') ."` ( `module`, `catid`, `filename`, `filepath`, `filesize`, `fileext`, `isimage`, `isthumb`, `downloads`, `userid`, `uploadtime`, `uploadip`, `status`, `authcode`, `siteid`) VALUES(:module, :catid, :filename, :filepath, :filesize, :fileext, :isimage, :isthumb, :downloads, :userid, :uploadtime, :uploadip, :status, :authcode, :siteid);";
		$stmt=$pdo->prepare($sql);
		$param=array(
		':module'=>'content', 
	   	':catid'=>6,
	   	':filename'=>$filename, 
	   	':filepath'=>$filepath,
	   	':filesize'=>$filesize, 
	   	':fileext'=>$fileext, 
	   	':isimage'=>1,
	   	':isthumb'=>0,
   		':downloads'=>0,
   		':userid'=>1,
   		':uploadtime'=>time(),
   		':uploadip'=>$_SERVER["REMOTE_ADDR"],
   		':status'=>0, 
   		':authcode'=>'b26ca47c3a4a6b1f0d2277ea808065d3',
   		':siteid'=>1);
		$num=$stmt->execute($param);//返回受影响的记录条数,num为int类型
		$insertid=$pdo->lastInsertId();//返回新增的主键ID
  //if($num>0){
  //  echo '成功的添加了'.$num.'条记录,新增的主键ID是: '.$insertid;
  //}else{
  //  echo '添加失败';
  //}
	}catch(PDOExcetption $e){
    // die('操作失败'.$e->getMessage());
	}
}

/*程序正文开始*/
  $server =constant('SVR');
  $image = $_FILES['file'];
  $result = editupimgs($image, $server);
  echo json_encode($result);

在上面代码块的前几行，你要设置成你自己的PHPCMS的网址和数据表名

Step2 打开PHPCMS程序的这个文件： /phpcms/modules/attachment/templates/swfupload.tpl.php，找到以下部分

你可以搜索/filedset>，我们在它的下面添加以下代码

	<!--添加代码第1部分 开始-->
	<div class="mac-upload">
    		<div>Mac平台上传图片（非Flash上传）</div>
    		<div style="margin-top:8px;font-size:0;">
    			<input type="text" id="pic-uri" placeholder="图片网址" style="height:19px;width:350px;" autocomplete="off">
    			<button class="copy-btn" data-clipboard-target="#pic-uri">
    				复制
				</button>
			</div>
			<div style="margin-top:8px;">
    			<input type="file" id="input_upload_driver3" num="3" name="file" onchange="selectImage(this,3)" style="display:none;">
                <button type="button" class="uploadImage new-button" onclick="driverUpload(3)" id="true-button" style="display:none;">trueBtn</button>
                <button onclick="ask();" class="new-button">上传图片</button>
                <style>
                	.mac-upload{
                		border:1px solid #dce3ed;
                		margin-top:10px;
                		padding:5px 10px;
                	}
                	
                	.copy-btn{
                		width:50px;
                		height:25px;
                		vertical-align:top;
                		margin-left:-5px;
                		color:#000;
                	}
                	
                	.new-button{
                		border-radius:3px;
                		background:#ff7404;
                		border:1px solid #ff7404;
                		width:80px;
                		height:30px;
                		color:#fff;
                		font-weight:900;
                	}
                
                	.new-button:hover{
                		cursor: pointer;
                	}
                	
                	#pic-preview{
                		margin-left:0px;
                		margin-top:10px;
                		max-width:300px;
                	}
                </style>
              </div>
            <div class="add-image-in-me"></div>
    	</div>
   	<!--添加代码第1部分 结束-->

Step3 仍在 swfupload.tpl.php，在</body>后添加以下代码

<!--添加代码第2部分 开始-->
<script src="http://static.class4ever.com/clipboard.js/v2.0.4/clipboard.min.js"></script>
<script src="https://static.class4ever.com/layui/v2.5.5/layui.all.js"></script>
<script>
	new ClipboardJS('.copy-btn');//初始化clipborad.js
	
	//监听：复制按钮
	$('.copy-btn').click(function(){
		if($('#pic-uri').val().length>0){
			layer.msg('已复制')
		}
	})
	
	
	// 监听:当点击"上传文件"按钮, 弹出确认框
    function ask(){
        layer.confirm('点选图片将同时保存至网站“图库”，请慎重选择。', {
            btn: ['了解','算了'] //按钮
            }, function(index){
                layer.close(index);
                $('#true-button').click();
            }, function(){});
    }

    /*上传图片前端部分 开始*/
    function driverUpload(num) {
        $('#input_upload_driver' + num).click(); // 模拟文件上传按钮点击操作 
    }

    function getFileName(o) {
        var pos = o.lastIndexOf("\\");
        return o.substring(pos + 1);
    }

    function selectImage(obj, num) {
        nums = $(obj).attr('num');
        console.log(nums);
        var formData = new FormData();
        formData.append('file', $('#input_upload_driver' + nums)[0].files[0]);
        $.ajax({
            url: '/upload.php',
            type: 'POST',
            cache: false,
            data: formData, //表单数据
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (data) {
            	//console.log(data)
                if(data[0]=='wrongSuffix'){
                	layer.msg('只支持png, jpg, gif, webp格式的图片')
                }else{
                  	//console.log(data)
                	var html='';
                	html += '<img src="'
                	html +=data.data.src
                	html +='" id="pic-preview">';
                	$('.add-image-in-me').empty()
                	$('.add-image-in-me').append(html)
                	$('#pic-uri').val(data.data.src);
                	layer.msg('上传成功，您可在图库选择，或者复制上方网址')
               }           
            }
        });
    }
    /*上传图片前端部分 结束*/
</script>
<!--添加代码第2部分 结束-->

当然，上面代码块中的2个js文件，你可以自行安装，用自己的。

然后再上传附件的时候，页面就像这样了

这可以以非flash的方式上传图片，同时保存到“图库”里面。