오늘은 파일 업로드, 출력 구현한 후 부트스트랩 이용해서 디자인 마친 후 마저 백엔드 작업 끝낼 예정
write.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <tr> <td> <div class="file_list"> <input id="file_input" type="file" name="file" class="file0" onchange="imgPreview(event);" multiple /> <div id="img_preview"></div> </div> </td> </tr> <tr> <td> <input type="button" id="buttonSbm" value='작성하기'/> </td> </tr> </table> </form> <script> function imgPreview(event) { $('#img_preview img').attr("src",null); for (var image of event.target.files) { var reader = new FileReader(); reader.onload = function(event) { var img = document.createElement("img"); img.setAttribute("src", event.target.result); document.querySelector("div#img_preview").appendChild(img); }; console.log(image); reader.readAsDataURL(image); } } </script> | cs |
게시글 작성을 위한 write.jsp
input 에 multiple 속성을 추가해 여러 개의 이미지를 한 번에 올리는 방식으로 바꿨다.
그리고 onchange() 함수를 추가했다.
https://sinna94.tistory.com/
해당 글을 참조해 onchange() 함수를 작성했고, 첨부 파일이 변경됐을 때 기존의 미리보기 이미지가 남아있는 것을 발견해 해당 div의 "src"를 null 로 바꿔주는 코드를 추가해서 수정했다.
2년차 백엔드 개발자, crimy