Cheditor 이미지 업로드 미리보기 정보
Cheditor 이미지 업로드 미리보기
본문
cheditor에서 이미지 삽입할 때 미리보기 창은 있는데 미리보기는 안되더라구요
그래서 inser_image.php파일을 보니 미리보기를 할 수 없는 구조같던데요....
질문게시판이나 팁 게시판에서 검색해 봐도 '미리보기'에 대해 언급한 분이 안계신 걸로 보아
다들 잘 되는데 저만 안되는 건가요?
미리보기가 안됩니다~~
찾아보기 버튼을 눌러서 그림을 선택하면 display_image()가 호출되는데,
실제 업로드가 이루어 지는 부분은 php에서 담당하니까 display_image()는 아직 올라오지도 않은 그림을 출력하려고 하는 것 아닌가요?
submit을 주고 나서야 업로드가 되고, 이제 막 보이려는 찰나 윈도우가 닫히는 구조인 것 같아요
submit 파일을 분리하지 않는 이상 미리보기가 힘들 것 같은데요...
제가 잘못 이해한 건가요??
도와주세요~~~
저 fckeditor도 비록 허접이지만 스킨에 업로드도 했구요. 열심히 할께요~~~
도와주시면 팁란에 올릴께요~~
p.s. 영국의 캠릿브지 대학교와 옥퍼스드 대학교에도 추천장을 드릴께요~
제 포인트 모두 겁니다..-_-;;
아래는 utf-8버젼 (아, cheditor는 관계없죠?)의 소스를 그대로 올렸습니다.
<?php
include_once("./_common.php");
include_once("./_common.php");
if ($_REQUEST['do'] == "submit") {
if (!preg_match("/\.(gif|png|jp[e]?g)$/i", $_FILES['AttachFile']['name']))
alert("그림 삽입은 GIF, JPG, PNG 파일만 가능합니다.");
alert("그림 삽입은 GIF, JPG, PNG 파일만 가능합니다.");
require_once "./imageupload-class.php";
$attach = new uploader;
$attach = new uploader;
//////////////////////////////////////////////////////////////////////////
// 이미지 파일이 저장될 디렉토리 경로를 지정합니다.
// $save_as_directory의 퍼미션은 777로 설정합니다.
// 이미지 파일이 저장될 디렉토리 경로를 지정합니다.
// $save_as_directory의 퍼미션은 777로 설정합니다.
$ym = date("ym", $g4[server_time]);
//$save_as_directory = "/usr/local/apache/htdocs/cheditor2/attach/";
$save_as_directory = "$g4[path]/data/$g4[editor]/$ym/";
$save_as_directory = "$g4[path]/data/$g4[editor]/$ym/";
@mkdir($save_as_directory, 0707);
@chmod($save_as_directory, 0707);
@chmod($save_as_directory, 0707);
//////////////////////////////////////////////////////////////////////////
// $save_as_directory의 URL 경로를 입력합니다.
//$save_as_url = "$g4[url]/data/$g4[editor]/$ym/";
$save_as_url = "$g4[path]/data/$g4[editor]/$ym/";
// $save_as_directory의 URL 경로를 입력합니다.
//$save_as_url = "$g4[url]/data/$g4[editor]/$ym/";
$save_as_url = "$g4[path]/data/$g4[editor]/$ym/";
//////////////////////////////////////////////////////////////////////////
// 옵션:
//
// $attach->max_filesize(102400); // 이미지 업로드 최대 크기
// $attach->max_image_size(1024, 1024); // 이미지 가로, 세로 최대 픽셀 크기
// 옵션:
//
// $attach->max_filesize(102400); // 이미지 업로드 최대 크기
// $attach->max_image_size(1024, 1024); // 이미지 가로, 세로 최대 픽셀 크기
$success = $attach->upload("AttachFile", "", "");
if ($success) {
// $attach->save_file("파일 저장 디렉토리", 저장 옵션);
//
// 파일 이름에 한글 또는 사용되어 서는 안될 특수문자가 있을 경우, 잘라버립니다.
//
// 저장 옵션:
// 1 = 같은 이름의 파일이 존재 하면 덮어 씁니다.
// 2 = 같은 이름의 파일이 존재할 경우, 파일 이름 뒤에 _copy,jpg, _copy1.jpg ... 식으로 이름을 붙입니다.
// 3 = 같은 이름의 파일이 존재할 경우, 업로드하지 않습니다.
// $attach->save_file("파일 저장 디렉토리", 저장 옵션);
//
// 파일 이름에 한글 또는 사용되어 서는 안될 특수문자가 있을 경우, 잘라버립니다.
//
// 저장 옵션:
// 1 = 같은 이름의 파일이 존재 하면 덮어 씁니다.
// 2 = 같은 이름의 파일이 존재할 경우, 파일 이름 뒤에 _copy,jpg, _copy1.jpg ... 식으로 이름을 붙입니다.
// 3 = 같은 이름의 파일이 존재할 경우, 업로드하지 않습니다.
$success = $attach->save_file($save_as_directory, 2);
}
}
if ($success) {
$filename = $save_as_url . $attach->file['name'];
$filename = $save_as_url . $attach->file['name'];
echo '<script language=javascript>';
//echo 'var obj = window.opener.chutil.myobj;';
echo 'var obj = window.opener.saveobj;';
echo 'var img = document.createElement("img");';
echo "img.src = \"$filename\";";
if ($_REQUEST['description']) echo 'img.alt = "' . $_REQUEST['description'] . '";';
if ($_REQUEST['alignment']) echo 'img.align = "' . $_REQUEST['alignment'] . '";';
if ($_REQUEST['b']) echo 'img.border = "' . $_REQUEST['b'] . '";';
if ($_REQUEST['v']) echo 'img.vspace = "' . $_REQUEST['v'] . '";';
if ($_REQUEST['h']) echo 'img.hspace = "' . $_REQUEST['h'] . '";';
echo 'img.width = "' . $_REQUEST['imageWidth'] . '";';
echo 'img.height = "' . $_REQUEST['imageHeight'] . '";';
echo 'eval("window.opener."+obj).insertImage(img);';
echo 'window.close();';
echo '</script>';
}
else {
if ($attach->errors) {
while (list($k, $v) = each($attach->errors)) {
echo $v . "<br>";
}
}
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?=$g4[charset]?>">
<title>이미지 넣기</title>
<STYLE TYPE="text/css">
body {
background-color: #eeeeee;
margin: 5px;
border: 0;
padding: 5px;
}
.button {
font-size: 9pt;
padding-top: 3px;
height: 24px;
width: 6em;
}
img {
border: 0;
}
//echo 'var obj = window.opener.chutil.myobj;';
echo 'var obj = window.opener.saveobj;';
echo 'var img = document.createElement("img");';
echo "img.src = \"$filename\";";
if ($_REQUEST['description']) echo 'img.alt = "' . $_REQUEST['description'] . '";';
if ($_REQUEST['alignment']) echo 'img.align = "' . $_REQUEST['alignment'] . '";';
if ($_REQUEST['b']) echo 'img.border = "' . $_REQUEST['b'] . '";';
if ($_REQUEST['v']) echo 'img.vspace = "' . $_REQUEST['v'] . '";';
if ($_REQUEST['h']) echo 'img.hspace = "' . $_REQUEST['h'] . '";';
echo 'img.width = "' . $_REQUEST['imageWidth'] . '";';
echo 'img.height = "' . $_REQUEST['imageHeight'] . '";';
echo 'eval("window.opener."+obj).insertImage(img);';
echo 'window.close();';
echo '</script>';
}
else {
if ($attach->errors) {
while (list($k, $v) = each($attach->errors)) {
echo $v . "<br>";
}
}
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?=$g4[charset]?>">
<title>이미지 넣기</title>
<STYLE TYPE="text/css">
body {
background-color: #eeeeee;
margin: 5px;
border: 0;
padding: 5px;
}
.button {
font-size: 9pt;
padding-top: 3px;
height: 24px;
width: 6em;
}
img {
border: 0;
}
font {
font-size: 9pt;
font-family: 굴림;
}
</STYLE>
</head>
<body bgcolor="#dedfdf" oncontextmenu="return false">
<center>
<form action="insert_image.php?do=submit" name="insertImage" method=post style="inline" enctype="multipart/form-data">
font-size: 9pt;
font-family: 굴림;
}
</STYLE>
</head>
<body bgcolor="#dedfdf" oncontextmenu="return false">
<center>
<form action="insert_image.php?do=submit" name="insertImage" method=post style="inline" enctype="multipart/form-data">
<fieldset><legend><font color="blue">미리 보기</font></legend>
<table border="0" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="240">
<tr>
<td bgcolor="#999999">
<table border="0" cellpadding="2" cellspacing="1" width="100%">
<tr>
<td bgcolor="white" height="184" valign="center" align="center">
<span id="show_image"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
<br>
<fieldset><legend><font color="blue">그림 삽입</font></legend>
<table border="0" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td>
<font>삽입할 그림 선택:</font>
</td>
</tr>
<tr>
<td>
<input type="file" size="37" name="AttachFile" onChange="display_image();">
</td>
</tr>
<tr>
<td>
<font>그림 설명 (옵션):</font>
</td>
</tr>
<tr>
<td><input type="text" name="description" id="description" size="50"></td>
</tr>
</table>
</fieldset>
<br>
<fieldset><legend><font color="blue">옵션</font></legend>
<table border="0" cellpadding="4" cellspacing="1" width="100%">
<tr bgcolor="#c0c0c0">
<td>
<font><b>레이아웃</b></font>
</td>
<td>
<font><b>간격</b></font>
</td>
</tr>
<tr bgcolor="#dedfdf">
<td width="50%">
<font>맞춤:
<select size="1" name="alignment" id="alignment" style="font-size:9pt">
<option value="" selected>없음</option>
<option value="Baseline">기준선</option>
<option value="Top">위쪽</option>
<option value="Middle">가운데</option>
<option value="Bottom">아래쪽</option>
<option value="Toptext">문자열 위쪽</option>
<option value="Absmiddle">선택 영역의 가운데</option>
<option value="Absbottom">선택 영역의 아래쪽</option>
<option value="Left">왼쪽</option>
<option value="Right">오른쪽</option>
</select></font>
</td>
<td width="50%"><font>가로여백:</font>
<input type="text" name="h" id="h" size="3" value="0">
</td>
</tr>
<tr bgcolor="#dedfdf">
<td>
<font>괘선 두께:
<input type="text" name="b" id="b" size="3" value="0"></font>
</td>
<td>
<font>세로여백:
<input type="text" name="v" id="v" size="3" value="0"></font>
</td>
</tr>
<tr bgcolor="#c0c0c0">
<td>
<font><b>이미지 가로 폭</b></font>
</td>
<td>
<font><b>이미지 세로 폭</b></font>
</td>
</tr>
<tr bgcolor="#dedfdf">
<td>
<font>가로 픽셀:
<input type="text" name="imageWidth" id="imageWidth" size="5" value="0"></font>
</td>
<td>
<font>세로 픽셀:
<input type="text" name="imageHeight" id="imageHeight" size="5" value="0"></font>
</td>
</tr>
</table>
</fieldset>
<br>
<input type="button" onClick="insertImage.submit();" value="확인" class="button">
<input type="button" value="취소" onClick="window.close();" class="button">
</form>
</center>
<script language=javascript>
<table border="0" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="240">
<tr>
<td bgcolor="#999999">
<table border="0" cellpadding="2" cellspacing="1" width="100%">
<tr>
<td bgcolor="white" height="184" valign="center" align="center">
<span id="show_image"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
<br>
<fieldset><legend><font color="blue">그림 삽입</font></legend>
<table border="0" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td>
<font>삽입할 그림 선택:</font>
</td>
</tr>
<tr>
<td>
<input type="file" size="37" name="AttachFile" onChange="display_image();">
</td>
</tr>
<tr>
<td>
<font>그림 설명 (옵션):</font>
</td>
</tr>
<tr>
<td><input type="text" name="description" id="description" size="50"></td>
</tr>
</table>
</fieldset>
<br>
<fieldset><legend><font color="blue">옵션</font></legend>
<table border="0" cellpadding="4" cellspacing="1" width="100%">
<tr bgcolor="#c0c0c0">
<td>
<font><b>레이아웃</b></font>
</td>
<td>
<font><b>간격</b></font>
</td>
</tr>
<tr bgcolor="#dedfdf">
<td width="50%">
<font>맞춤:
<select size="1" name="alignment" id="alignment" style="font-size:9pt">
<option value="" selected>없음</option>
<option value="Baseline">기준선</option>
<option value="Top">위쪽</option>
<option value="Middle">가운데</option>
<option value="Bottom">아래쪽</option>
<option value="Toptext">문자열 위쪽</option>
<option value="Absmiddle">선택 영역의 가운데</option>
<option value="Absbottom">선택 영역의 아래쪽</option>
<option value="Left">왼쪽</option>
<option value="Right">오른쪽</option>
</select></font>
</td>
<td width="50%"><font>가로여백:</font>
<input type="text" name="h" id="h" size="3" value="0">
</td>
</tr>
<tr bgcolor="#dedfdf">
<td>
<font>괘선 두께:
<input type="text" name="b" id="b" size="3" value="0"></font>
</td>
<td>
<font>세로여백:
<input type="text" name="v" id="v" size="3" value="0"></font>
</td>
</tr>
<tr bgcolor="#c0c0c0">
<td>
<font><b>이미지 가로 폭</b></font>
</td>
<td>
<font><b>이미지 세로 폭</b></font>
</td>
</tr>
<tr bgcolor="#dedfdf">
<td>
<font>가로 픽셀:
<input type="text" name="imageWidth" id="imageWidth" size="5" value="0"></font>
</td>
<td>
<font>세로 픽셀:
<input type="text" name="imageHeight" id="imageHeight" size="5" value="0"></font>
</td>
</tr>
</table>
</fieldset>
<br>
<input type="button" onClick="insertImage.submit();" value="확인" class="button">
<input type="button" value="취소" onClick="window.close();" class="button">
</form>
</center>
<script language=javascript>
function display_image()
{
var file = document.insertImage.AttachFile.value;
var allowSubmit = false;
var extArray = new Array(".gif", ".jpg", ".png");
{
var file = document.insertImage.AttachFile.value;
var allowSubmit = false;
var extArray = new Array(".gif", ".jpg", ".png");
extArray.join(" ");
if (!file) return;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
file = file.slice(file.indexOf("\\") + 1);
var ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) {
allowSubmit = true;
break;
}
}
if (extArray[i] == ext) {
allowSubmit = true;
break;
}
}
if (allowSubmit) {
show_image.innerHTML = '';
imgComplete();
}
else {
alert("그림 삽입은 GIF, JPG, PNG 파일만 가능합니다. 다시 선택하여 주십시요.");
}
}
show_image.innerHTML = '';
imgComplete();
}
else {
alert("그림 삽입은 GIF, JPG, PNG 파일만 가능합니다. 다시 선택하여 주십시요.");
}
}
function imgComplete ()
{
var img = document.createElement("img");
img.src = document.insertImage.AttachFile.value;
{
var img = document.createElement("img");
img.src = document.insertImage.AttachFile.value;
var w = 240;
var h = 180;
var resizeW;
var resizeH;
var h = 180;
var resizeW;
var resizeH;
if (img.complete == true) {
if (img.width > w || img.height > h) {
if (img.width > img.height) {
resizeW = img.width > w ? w : img.width;
resizeH = Math.round((img.height * resizeW) / img.width);
}
else {
resizeH = img.height > h ? h : img.height;
resizeW = Math.round((img.width * resizeH) / img.height);
}
}
else {
resizeW = img.width;
resizeH = img.height;
}
if (img.width > w || img.height > h) {
if (img.width > img.height) {
resizeW = img.width > w ? w : img.width;
resizeH = Math.round((img.height * resizeW) / img.width);
}
else {
resizeH = img.height > h ? h : img.height;
resizeW = Math.round((img.width * resizeH) / img.height);
}
}
else {
resizeW = img.width;
resizeH = img.height;
}
document.insertImage.imageHeight.value = img.height;
document.insertImage.imageWidth.value = img.width;
document.insertImage.imageWidth.value = img.width;
img.width = resizeW;
img.height = resizeH;
img.height = resizeH;
show_image.appendChild(img);
}
else {
setTimeout("imgComplete()", 100);
}
}
</script>
</body>
</html>
}
else {
setTimeout("imgComplete()", 100);
}
}
</script>
</body>
</html>
댓글 전체
헉... 그누보드에서 넣은 코드가 아니였군요...ㅠ.ㅠ
그곳에 가니 신나게도(?) 검색에서 결과가 나왔습니다.
다음은 개발자의 답변입니다.
안녕하세요? 나창호입니다.
사용하고 계신 브라우저가 IE 7.x 또는 gecko 계열인지요.
현재 IE7.x 버전에서는 이미지 미리보기가 나타나지 않습니다.
살펴 본 바로는 IE7의 버그라고 말하는 경우도 있지만, 제 생각에는 에디터의 몇몇 함수 사용에 문제가 있는 것 같습니다.
혹, 브라우저의 버전에 따른 문제가 아니라면 해당 URL을 알려주십시오.
감사합니다.
안녕하세요? 나창호입니다.
며칠 안으로 런칭할 새 버전에 대한 내용입니다.
추가적인 아이디어가 있으신 사용자분들이 계시면 말씀하여 주십시오. 참고하도록 하겠습니다.
1. 모든 코드를 새로 작성하였습니다. 이렇게 한 까닭은 좀 더 구조적인 코드와 W3C 표준안을 최대한 지키고자 했기 때문입니다.
2. 툴바 아이콘을 조금 작게 만들었고, 버튼 롤오버를 지원합니다.
3. 파이어폭스, 네스케이프, 오페라 등 gecko 계열 브라우저에서도 IE와 같은 글꼴, 크기 등의 풀다운 박스를 사용할 수 있도록 하였으며, 모든 브라우저에서 동일한 기능과 인터페이스를 사용할 수 있습니다.
4. IE7과 비스타(베타)에서도 테스팅하여 문제가 없도록 하였습니다.
=======================================================
5. IE7과 gecko 계열에서 이미지 전송시 미리보기를 할 수 없습니다. 사이트 보안상의 이유로 이미지의 src에 로컬 PC의 파일을 연결시킬 수 없기 때문입니다.
하지만, 웹상에 게시된 이미지의 경우 미리보기가 가능합니다.
=======================================================
6. 이미지의 효과적인 보기를 위해 lightbox 기능을 지원합니다.
7. 몇몇 함수의 이름이 바뀌었습니다. 때문에 업그레이드시 사용중이신 코드에서 함수명을 바꿀 필요가 있습니다.
8. 브라우저에 따라 팝업 창이 막히는 경우가 있어서, 레이어를 이용하여 팝업 창을 대신하였습니다.
9. 그밖에 필요하다고 생각한 몇몇 기능들이 있지만, 최종적으로 런칭된 후 자세한 내용을 게시하겠습니다.
결국은 IE7.0을 쓰기 때문이였군요.
또 리쟈형이 cheditor를 업뎃해 주셔도 안될꺼라는 거군요.
또 리쟈형의 개발중인 작품도 있었군요.. http://gblog.sir.co.kr/geditor_test/geditor.php
여기까지 미리보기와 관련되어 제가 알아낸 내용입니다.
그리고 추가하실 내용이 있으면 여기 추가해 주세요...
포인트가 이제 0점이 될것이기 때문에 점수는 못드리지만,
저같은 초보자들에게 도움될 것 같아서요.
음.. 우선 다른 그누보드 싸이트좀 둘러봐야 겠습니다.
그곳에 가니 신나게도(?) 검색에서 결과가 나왔습니다.
다음은 개발자의 답변입니다.
안녕하세요? 나창호입니다.
사용하고 계신 브라우저가 IE 7.x 또는 gecko 계열인지요.
현재 IE7.x 버전에서는 이미지 미리보기가 나타나지 않습니다.
살펴 본 바로는 IE7의 버그라고 말하는 경우도 있지만, 제 생각에는 에디터의 몇몇 함수 사용에 문제가 있는 것 같습니다.
혹, 브라우저의 버전에 따른 문제가 아니라면 해당 URL을 알려주십시오.
감사합니다.
안녕하세요? 나창호입니다.
며칠 안으로 런칭할 새 버전에 대한 내용입니다.
추가적인 아이디어가 있으신 사용자분들이 계시면 말씀하여 주십시오. 참고하도록 하겠습니다.
1. 모든 코드를 새로 작성하였습니다. 이렇게 한 까닭은 좀 더 구조적인 코드와 W3C 표준안을 최대한 지키고자 했기 때문입니다.
2. 툴바 아이콘을 조금 작게 만들었고, 버튼 롤오버를 지원합니다.
3. 파이어폭스, 네스케이프, 오페라 등 gecko 계열 브라우저에서도 IE와 같은 글꼴, 크기 등의 풀다운 박스를 사용할 수 있도록 하였으며, 모든 브라우저에서 동일한 기능과 인터페이스를 사용할 수 있습니다.
4. IE7과 비스타(베타)에서도 테스팅하여 문제가 없도록 하였습니다.
=======================================================
5. IE7과 gecko 계열에서 이미지 전송시 미리보기를 할 수 없습니다. 사이트 보안상의 이유로 이미지의 src에 로컬 PC의 파일을 연결시킬 수 없기 때문입니다.
하지만, 웹상에 게시된 이미지의 경우 미리보기가 가능합니다.
=======================================================
6. 이미지의 효과적인 보기를 위해 lightbox 기능을 지원합니다.
7. 몇몇 함수의 이름이 바뀌었습니다. 때문에 업그레이드시 사용중이신 코드에서 함수명을 바꿀 필요가 있습니다.
8. 브라우저에 따라 팝업 창이 막히는 경우가 있어서, 레이어를 이용하여 팝업 창을 대신하였습니다.
9. 그밖에 필요하다고 생각한 몇몇 기능들이 있지만, 최종적으로 런칭된 후 자세한 내용을 게시하겠습니다.
결국은 IE7.0을 쓰기 때문이였군요.
또 리쟈형이 cheditor를 업뎃해 주셔도 안될꺼라는 거군요.
또 리쟈형의 개발중인 작품도 있었군요.. http://gblog.sir.co.kr/geditor_test/geditor.php
여기까지 미리보기와 관련되어 제가 알아낸 내용입니다.
그리고 추가하실 내용이 있으면 여기 추가해 주세요...
포인트가 이제 0점이 될것이기 때문에 점수는 못드리지만,
저같은 초보자들에게 도움될 것 같아서요.
음.. 우선 다른 그누보드 싸이트좀 둘러봐야 겠습니다.
