富文本編輯器 - wangEditor 上傳圖片

時間 2019-11-18

標籤文本編輯器 wangeditor 上傳圖片简体版

原文原文鏈接

效果：javascript

、php

項目結構圖：css

wangEditor-upload-img.html代碼：html

<html>
	<head>
		<title>wangEditor-圖片上傳</title>
		<link rel="stylesheet" href="wangEditor/css/wangEditor-1.3.0.min.css">
		
		<style type="text/css">
			.wrap{
				margin:30px 30px 0 30px;
			}
			#txt_wangEditor{
				width:100%;
				height:300px;
			}
		</style>
	</head>
	<body>
		<!--上傳-->
		<div id="uploadContainer">
			<input type="button" value="選擇文件" id="btnBrowse"/>
			<input type="button" value="上傳文件" id="btnUpload">
			<ul id="fileList"></ul>
		</div>
		<!--富文本編輯器-->
		<div class="wrap">
			<textarea id="txt_wangEditor"></textarea>
			<input type="button" id="submit" value="獲取內容">
		</div>

		
		
		<!-- JQuery -->
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<!-- wangEditor-富文本編輯器 -->
		<script type="text/javascript" src="wangEditor/js/wangEditor-1.3.5.min.js"></script>
		<!-- plupload-上傳組件 -->
		<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
		<!-- js -->
		<script type="text/javascript">
			$(document).ready(function(){
				//獲取dom節點
				var $uploadContainer = $('#uploadContainer'),
						$fileList = $('#fileList'),
						$btnUpload = $('#btnUpload');

				//實例化富文本編輯器
				var editor = $('#txt_wangEditor').wangEditor({
					//重要：傳入 uploadImgComponent 參數，值爲 $uploadContainer
					uploadImgComponent: $uploadContainer,
					//表情
					 'expressions':geticon()
				});

				//實例化一個上傳對象
				var uploader = new plupload.Uploader({
					browse_button: 'btnBrowse',
					url: 'upload.php', 
					flash_swf_url: 'plupload/Moxie.swf',
					sliverlight_xap_url: 'plupload/Moxie.xap',
					filters: {
								mime_types: [
								  //只容許上傳圖片文件 （注意，extensions中，逗號後面不要加空格）
								  { title: "圖片文件", extensions: "jpg,gif,png,bmp" }
								]
						}
				});

				//存儲多個圖片的url地址
				var urls = [];

				//重要：定義 event 變量，會在下文（觸發上傳事件時）被賦值
				var event;

				//初始化
				uploader.init();

				//綁定文件添加到隊列的事件
				uploader.bind('FilesAdded', function (uploader, files) {
						//顯示添加進來的文件名
					$.each(files, function(key, value){
						var fileName = value.name,
							html = '<li>' + fileName + '</li>';
						$fileList.append(html);
					});
				});

				//單個文件上傳以後
				uploader.bind('FileUploaded', function (uploader, file, responseObject) {
						//從服務器返回圖片url地址
					var url = responseObject.response;
						//先將url地址存儲來，待全部圖片都上傳完了，再統一處理
					urls.push(url);
					});

					//所有文件上傳時候
				uploader.bind('UploadComplete', function (uploader, files) {
					// 用 try catch 兼容IE低版本的異常狀況
					try {
						//打印出全部圖片的url地址
						$.each(urls, function (key, value) {
							//重要：調用 editor.command 方法，把每個圖片的url，都插入到編輯器中
							//重要：此處的 event 即上文定義的 event 變量
							editor.command(event, 'insertHTML', '<img src="' + value + '"/>');
						});
					} catch (ex) {
						// 此處可不寫代碼
					} finally {
						//清空url數組
						urls = [];

						//清空顯示列表
						$fileList.html('');
					}
				});

				//上傳事件
				$btnUpload.click(function(e){
					//重要：將事件參數 e 賦值給 上文定義的 event 變量
					event = e;
					uploader.start();
				});
			
			})
		</script>
	</body>
</html>

upload.php代碼：java

<?php
	$targetDir = 'upload_tmp';
	$uploadDir = 'upload';

	$cleanupTargetDir = true; 


	if (!file_exists($targetDir)) {
		@mkdir($targetDir);
	}

	if (!file_exists($uploadDir)) {
		@mkdir($uploadDir);
	}

	if (isset($_REQUEST["name"])) {
		$fileName = $_REQUEST["name"];
	} elseif (!empty($_FILES)) {
		$fileName = $_FILES["file"]["name"];
	} else {
		$fileName = uniqid("file_");
	}
	$fileName = iconv('UTF-8', 'GB2312', $fileName);
	$filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;
	$uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;


	$imgUrl="http://localhost:8088/FileUpload/".$uploadDir."/".$fileName;
	echo $imgUrl;

	$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
	$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 1;


	if ($cleanupTargetDir) {
		if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
			die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
		}

		while (($file = readdir($dir)) !== false) {
			$tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;

			if ($tmpfilePath == "{$filePath}_{$chunk}.part" || $tmpfilePath == "{$filePath}_{$chunk}.parttmp") {
				continue;
			}

			if (preg_match('/\.(part|parttmp)$/', $file) && (@filemtime($tmpfilePath) < time() - $maxFileAge)) {
				@unlink($tmpfilePath);
			}
		}
		closedir($dir);
	}



	if (!$out = @fopen("{$filePath}_{$chunk}.parttmp", "wb")) {
		die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
	}

	if (!empty($_FILES)) {
		if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
			die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
		}

		if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
			die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
		}
	} else {
		if (!$in = @fopen("php://input", "rb")) {
			die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
		}
	}

	while ($buff = fread($in, 4096)) {
		fwrite($out, $buff);
	}

	@fclose($out);
	@fclose($in);

	rename("{$filePath}_{$chunk}.parttmp", "{$filePath}_{$chunk}.part");

	$index = 0;
	$done = true;
	for( $index = 0; $index < $chunks; $index++ ) {
		if ( !file_exists("{$filePath}_{$index}.part") ) {
			$done = false;
			break;
		}
	}
	if ( $done ) {
		if (!$out = @fopen($uploadPath, "wb")) {
			die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
		}

		if ( flock($out, LOCK_EX) ) {
			for( $index = 0; $index < $chunks; $index++ ) {
				if (!$in = @fopen("{$filePath}_{$index}.part", "rb")) {
					break;
				}

				while ($buff = fread($in, 4096)) {
					fwrite($out, $buff);
				}

				@fclose($in);
				@unlink("{$filePath}_{$index}.part");
			}

			flock($out, LOCK_UN);
		}
		@fclose($out);
	}

原版視頻及其源碼：http://www.kancloud.cn/wangfupeng/wangeditor/65747jquery