질문
summernote 이미지 업로드 질문(php
비공개
조회수 2,903
작성일2019.06.29
안녕하세요?
summernote에디터를 홈페이지에 연결하고 이미지업로드 부분을 해결하려는데 아무리해도 안됩니다. 특별히 에러도 없는 것 같은데... 많이 찾아보고 따라해도 되지 않네요... 경험이 있거나 웹프로그램 잘하시는 분이 계시면 소스라도 한 번 살펴봐주십시오... 감사합니다.
1. index.php
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea id="summernote"></textarea>
</form>
</div>
<script>
$(document).ready(function() {
$("#summernote").summernote({
placeholder:'place image here.',
height:300,
callbacks: {
onImageUpload:function(files,editor,welEditable){
for(var i = files.length - 1;i>=0;i--){
sendFile(files[i],this);
}
}
}
});
});
function sendFile(file, el){
var form_data = new FormData();
form_data.append('file', file);
$.ajax({
data:form_data,
type:"POST",
url:'editor-upload.php',
cache:false,
contentType:false,
processData:false,
success:function(url){
$(el).summernote('editor.insertImage',url);
}
});
}
</script>
</body>
</html>
2. editor-upload.php
<?php
if(empty($_FILES['file']))
{
exit();
}
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = round(microtime(true)).'.'.end($temp);
$destinationFilePath = './img-uploads/'.$newfilename;
if (!move_uploaded_file($_FILES['file']['temp_name'], $destinationFilePath)) {
echo "$errorImgFile";
}
else{
echo "$destinationFilePath";
}
?>
3. image-uploads 폴더 퍼미션은 777.
이상입니다...
더해서 증상은 이미를 올리면 아무런 반응이 없습니다. 폴더에도 이미지가 들어가지 않네요...
답변자님,
정보를 공유해 주세요.
2번째 답변
DD
물신
자바스크립트 10위, PHP 8위, 해외여행 분야에서 활동
본인 입력 포함 정보
index.php 파일의 자바스크립트 문제는 아니고, editor-upload.php 파일의 php 문구 문제네요.
그래도 정리차원에서 양쪽 모두의 소스를 올려드릴테니 참고하세요.
index.php
ajax 에서 error 발생시 처리하는 부분을 추가.
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea id="summernote"></textarea>
</form>
</div>
<script>
$(document).ready(function() {
$("#summernote").summernote({
placeholder:'place image here.',
height:300,
callbacks: {
onImageUpload:function(files, editor, welEditable){
for(var i = files.length - 1;i>=0;i--){
sendFile(files[i], this);
}
}
}
});
});
function sendFile(file, el, welEditable){
var form_data = new FormData();
form_data.append('file', file);
$.ajax({
data:form_data,
type:"POST",
url:'./editor-upload.php',
cache:false,
contentType:false,
processData:false,
success:function(url){
$(el).summernote('editor.insertImage', $.trim(url));
},
error: function(data) {
console.log(data);
}
});
}
</script>
</body>
</html>
editor-upload.php
변수 $errorImgFile 의 내용이 무엇인지 잘 모르겠지만, 이 파일에서 중요한 것은 정상적으로 파일($_FILE)을 처리하면 $destinationFilePath 의 값인 이미지의 주소만 출력해야 한다는 점입니다. 혹시라도 보여주지 않은 소스 부분이 있어, 다른 문구나 문서의 head 정보 등을 출력하고 있다면, 이로 인해 ajax에서 받아오는 값이 이미지 주소만이 아니라서 올바르게 동작하지 않을 수 있습니다.
<?php
if ($_FILES['file']['name']) {
if (!$_FILES['file']['error']) {
$temp = explode(".", $_FILES["file"]["name"]);
$newfilename = round(microtime(true)).'.'.end($temp);
$destinationFilePath = './img-uploads/'.$newfilename;
if (!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)) {
echo $errorImgFile;
}
else{
echo $destinationFilePath;
}
}
else {
echo $message = '파일 에러 발생!: ' . $_FILES['file']['error'];
}
}
?>
2019.07.03.
-
채택
질문자가 채택한 답변입니다.
도움이 되었다면 UP 눌러주세요!
UP이 많은 답변일수록 사용자들에게 더 많이 노출됩니다.
UP이 많은 답변일수록 사용자들에게 더 많이 노출됩니다.
최근 공지사항이 없습니다.
