PHP 무료 웹에디터 섬머노트 Summer Note 사용하기 - 이미지 첨부하기 3편

한가지만 더해보자. 보통 글쓰기 페이지에는 웹에디터 안에 이미지를 넣는 것도 있고 외부에 첨부하는 것도 있는 경우가 많다. 이렇게 이미지를 글에 첨부할때 서버에 파일을 올려서 미리보기를 할 수 있도록 해보자

 

우선 html  소스는...

 

<div class="form-group">

      <div id="attach_site">

              <div id="attachFiles">

                </div>

        <input type="file" multiple class="form-input" name="afile" id="afile" />

        </div>

</div>

 

이미지를 첨부해서 id가 attachFiles라는 곳에 미리보기를 할 것이다.

 

스크립트를 확인해보자

 

$("#afile").change(function(){

 

var formData = new FormData();

var files = $('#afile').prop('files');

for(var i=0; i < files.length; i++) {

    attachFile(files[i]);

}

});   

 

function attachFile(file) {

    var formData = new FormData();

    formData.append("file", file);

    $.ajax({

        url: '/board/saveImage.php',

        data: formData,

        cache: false,

        contentType: false,

        processData: false,

        type: 'POST',

        success: function (data) {

            if(data==-1){

                alert('용량이 너무크거나 이미지 파일이 아닙니다.');

                return;

            }else{

                var img="<img src='"+data+"' width='50'><br>";

                $("#attachFiles").append(img);

 

                var attachFie=$("#attachFie").val();

                if(attachFie){

                    attachFie=attachFie+",";

                }

                $("#attachFie").val(attachFie+data);

            }

        }

    });

 

}

 

이렇게 해주면 첨부이미지를 입력했을때 서버에 올려서 미리보기를 할 수 있다. 이미지를 서버에 올리는 php파일은 2편에서 썼던 그것과 같은 놈이다.

 

쉬....쉽지만은 않지만 해볼만하다.