wangEditor使用与配置图片上传

最新推荐文章于 2024-09-19 11:11:18 发布

给我一瓶冰阔洛

最新推荐文章于 2024-09-19 11:11:18 发布

阅读量2.9k

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/qq_43035350/article/details/106941715

版权

PHP 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

wangeditor v:3.3.1

参考手册：https://www.kancloud.cn/wangfupeng/wangeditor3/335782

下载：https://github.com/wangfupeng1988/wangEditor/releases

html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>UE</title>
    <link rel="stylesheet" href="">
	<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
	 <script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>

</head>
<body>


<form id="form" method="post">
			<div id="contentDiv" style="width: 1000px;"></div>
			<textarea name="content" id="content" style="display:none" ></textarea>
		</form>
		<button id="btn1">获取富文本text内容</button>
		<button id="btn2">获取富文本html内容</button>
		<button id="btn3">获取表单信息</button>
		<button id="btn4">获取文本域内容</button>
	</body>
	<script>
		var E = window.wangEditor;
		var editor = new E('#contentDiv')
		var $text1 = $('#content');
		editor.customConfig.onchange = function (html) {
			// 监控变化，同步更新富文本内容到 textarea
			$text1.val(html);
		}
		editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024
		editor.customConfig.uploadImgServer = './imgupload.php';	//自定义上传图片（改成自己写的图片上传方法的路径）
		editor.customConfig.uploadFileName = 'imgFile';	//自定义文件名 
		/* 这样的话PHP后台这样获取文件信息
		//将文件上传的信息取出赋给变量
        $name = $_FILES['imgFile']['name'];
        $tmp_name = $_FILES['imgFile']['tmp_name'];
        $size = $_FILES['imgFile']['size'];
        $error = $_FILES['imgFile']['error'];
		*/
		editor.customConfig.uploadImgHooks = {
		 success: function (xhr, editor, result) {
			console.log(result);
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    },
		
			customInsert: function (insertImg, result, editor) {
			
		
				// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
				// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
		
				// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
				var url = result.data[0];
				insertImg(url)
		
				// result 必须是一个 JSON 格式字符串！！！否则报错
			}
		}
		editor.customConfig.customAlert = function (info) {	//关闭默认提示信息
			// info 是需要提示的内容
			//alert('自定义提示：' + info)
		}
		// 或者 var editor = new E( document.getElementById('content') )
		editor.create();
		$text1.val(editor.txt.html());
		
		//获取内容
		$('#btn1').click(function(){
			alert(editor.txt.text());	// 读取 text
		});
		$('#btn2').click(function(){
			alert(editor.txt.html());	// 读取 html
		});
		$('#btn3').click(function(){
			var formData = new FormData($( "#form" )[0]);
			alert(formData);
		});
		$('#btn4').click(function(){
			alert($('#content').val());	// 读取 html
		});
	</script>




</body>
</html>

php

<?php

class upload{
	protected $fileName;
	protected $maxSize;
	protected $allowMime;
	protected $allowExt;
	protected $uploadPath;
	protected $imgFlag;
	protected $fileInfo;
	protected $error;
	protected $ext;
	/**
	 * @param string $fileName
	 * @param string $uploadPath
	 * @param string $imgFlag
	 * @param number $maxSize
	 * @param array $allowExt
	 * @param array $allowMime
	 */
	public function __construct($fileName='myFile',$uploadPath='./uploads',$imgFlag=true,$maxSize=5242880,$allowExt=array('jpeg','jpg','png','gif'),$allowMime=array('image/jpeg','image/png','image/gif')){
		$this->fileName=$fileName;
		$this->maxSize=$maxSize;
		$this->allowMime=$allowMime;
		$this->allowExt=$allowExt;
		$this->uploadPath=$uploadPath;
		$this->imgFlag=$imgFlag;
		$this->fileInfo=$_FILES[$this->fileName];
	}
	/**
	 * 检测上传文件是否出错
	 * @return boolean
	 */
	protected function checkError(){
		if(!is_null($this->fileInfo)){
			if($this->fileInfo['error']>0){
				switch($this->fileInfo['error']){
					case 1:
						$this->error='超过了PHP配置文件中upload_max_filesize选项的值';
						break;
					case 2:
						$this->error='超过了表单中MAX_FILE_SIZE设置的值';
						break;
					case 3:
						$this->error='文件部分被上传';
						break;
					case 4:
						$this->error='没有选择上传文件';
						break;
					case 6:
						$this->error='没有找到临时目录';
						break;
					case 7:
						$this->error='文件不可写';
						break;
					case 8:
						$this->error='由于PHP的扩展程序中断文件上传';
						break;
						
				}
				return false;
			}else{
				return true;
			}
		}else{
			$this->error='文件上传出错';
			return false;
		}
	}
	/**
	 * 检测上传文件的大小
	 * @return boolean
	 */
	protected function checkSize(){
		if($this->fileInfo['size']>$this->maxSize){
			$this->error='上传文件过大';
			return false;
		}
		return true;
	}
	/**
	 * 检测扩展名
	 * @return boolean
	 */
	protected function checkExt(){
		$this->ext=strtolower(pathinfo($this->fileInfo['name'],PATHINFO_EXTENSION));
		if(!in_array($this->ext,$this->allowExt)){
			$this->error='不允许的扩展名';
			return false;
		}
		return true;
	}
	/**
	 * 检测文件的类型
	 * @return boolean
	 */
	protected function checkMime(){
		if(!in_array($this->fileInfo['type'],$this->allowMime)){
			$this->error='不允许的文件类型';
			return false;
		}
		return true;
	}
	/**
	 * 检测是否是真实图片
	 * @return boolean
	 */
	protected function checkTrueImg(){
		if($this->imgFlag){
			if(!@getimagesize($this->fileInfo['tmp_name'])){
				$this->error='不是真实图片';
				return false;
			}
			return true;
		}
	}
	/**
	 * 检测是否通过HTTP POST方式上传上来的
	 * @return boolean
	 */
	protected function checkHTTPPost(){
		if(!is_uploaded_file($this->fileInfo['tmp_name'])){
			$this->error='文件不是通过HTTP POST方式上传上来的';
			return false;
		}
		return true;
	}
	/**
	 *显示错误 
	 */
	protected function showError(){
		exit('<span style="color:red">'.$this->error.'</span>');
	}
	/**
	 * 检测目录不存在则创建
	 */
	protected function checkUploadPath(){
		if(!file_exists($this->uploadPath)){
			mkdir($this->uploadPath,0777,true);
		}
	}
	/**
	 * 产生唯一字符串
	 * @return string
	 */
	protected function getUniName(){
		return md5(uniqid(microtime(true),true));
	}
	/**
	 * 上传文件
	 * @return string
	 */
	public function uploadFile(){
		if($this->checkError()&&$this->checkSize()&&$this->checkExt()&&$this->checkMime()&&$this->checkTrueImg() && $this->checkHTTPPost()){
	
			$this->checkUploadPath();
			$this->uniName=$this->getUniName();
			$this->destination=$this->uploadPath.'/'.$this->uniName.'.'.$this->ext;
			if(@move_uploaded_file($this->fileInfo['tmp_name'], $this->destination)){ 
			$res = ['error'=>0,'data'=>[$this->destination]];
			echo json_encode($res);
				//return  $this->destination;
			
			}else{    
				$this->error='文件移动失败';
				$this->showError();
			}
		}else{
			$this->showError();
		}
	}
}

$arr = new upload('imgFile');
$res = $arr->uploadFile();






?>