[Jquery, Ajax] 이미지 클릭시 파일첨부 하고 디비 넣기 + 첨부이미지 미리보기 기능

Scenario: Instargram 에서 처럼 파일 업로드 메뉴이미지만 누르면 파일첨부 창이뜨고 내이미지를 첨부할려고했다

Solutions:(아래)

myprofile.jsp (html코드 생략)

jQuery 0.98 KB

1. $(function() {
2.     //이미지 클릭시 업로드창 실행
3.     $('#profile_file_add').click(function() {
4.         console.log('fileadd');
5.         $("input[name='fileProfile']").click();
6.        
7.     })
8.     //업로드 파일체인지가 됬을경우 실행되는 이벤트  form태그에 fileProfile은 hidden으로 넣어줌
9.     $("input[name='fileProfile']").change(function(e){
10.        
11.         $( "#frm_profile_img" ).submit();
12.         $("input[name='fileProfile']").val();
13.         var frm = document.getElementById('profile_file_add');
14.         frm.method = 'POST';
15.         frm.enctype = 'multipart/form-data';
16.         var fileData = new FormData(frm);
17.      
18.         // ajax
19.         $.ajax({
20.             type:'POST',
21.             url:'/BoardProject/profileUpdate.ref',
22.             data:fileData,
23.             processData: false,
24.             contentType: false,
25.             success : function(data, textStatus, xhr) {
26.                 console.log('success');
27.             },
28.             error : function(request,status,error) {  
29.                alert("code:"+request.status+"\n"+"error:"+error);
30.             }
31.         });
32.     })
33. })

service 영역.java

Java 1.25 KB

1. public class ProfileUploadCommand implements BoardCommand {
2.  
3.     @Override
4.     public void execute(HttpServletRequest request, HttpServletResponse response) {
5.         DAO dao = new DAO();
6.         HttpSession session = request.getSession();
7.         String mid=(String)session.getAttribute("mid");
8.         String contents ="";
9.         String fileName = "";
10.         //String profimg = ""; //프로필 이미지
11.         //**************** File 추가부분****************//
12.         String pathname = "C:\\dev\\profile";
13.         File f = new File(pathname);
14.         if (!f.exists()) {
15.             // 폴더가 존재하지 않으면 폴더 생성
16.             f.mkdirs();
17.         }
18.         String encType = "UTF-8";
19.         int maxFilesize = 5 * 1024 * 1024;
20.  
21.         // MultipartRequest(request, 저장경로[, 최대허용크기, 인코딩케릭터셋, 동일한 파일명 보호 여부])
22.         try {
23.             MultipartRequest mr = new MultipartRequest(request, pathname, maxFilesize, encType, new DefaultFileRenamePolicy());
24.             fileName = mr.getFilesystemName("fileProfile");
25.             System.out.println("upload profile mid@@@@@@"+mid);
26.             System.out.println("upload profile filename@@@@@@"+fileName);
27.         } catch (IOException e) {
28.             e.printStackTrace();
29.         }
30.         dao.profileUpdate(mid, fileName);
31.     }
32.  
33. }

-----------------------------------------------보너스---------------------------------------------------------

Scenario: db와의통신 없이 내가 첨부한 이미지를 미리보기 할 수 있는기능 추가

Solutions: 아래

파일첨부 폼.html

HTML 5 0.25 KB

1.     <form  action="write.ref" method="post" enctype="multipart/form-data">
2.         <input type="file" name="files">
3.         <div id="holder"></div>
4.         <textarea rows="5" cols="100" name="contents"></textarea><br>
5.         <input type="submit" value="글쓰기">
6.     </form>

rawdownloadcloneembedreportprintjQuery 1.07 KB

1. <script>
2. $("input[name='profile_img']").change(function(e){
3.     e.preventDefault();
4.  
5.     var file = this.files[0];
6.         reader = new FileReader();
7.    
8.     reader.onload = function (event) {
9.         var img = new Image();
10.         img.src = event.target.result;
11.         if (img.width > 700 || img.height > 500) { // holder width
12.           img.width = 700;
13.           img.height = 500;
14.         }
15.         $('#holder').empty();
16.         $('#holder').append(img);
17.     };
18.     reader.readAsDataURL(file);
19.    
20.     return false;
21. });
22. </script>
23.  
24. <!-- 2. DY가 짠 첨부파일 미리보기 소스-->
25. 
    
26. <script>
27. var upload = document.getElementsByTagName('input')[0],
28.     holder = document.getElementById('holder');
29.  
30. upload.onchange = function (e) {
31.     e.preventDefault();
32.    
33.     var file = upload.files[0],
34.         reader = new FileReader();
35.    
36.    
37.     reader.onload = function (event) {
38.         var img = new Image();
39.         img.src = event.target.result;
40.         if (img.width > 700 || img.height > 500) { // holder width
41.           img.width = 700;
42.           img.height = 500;
43.         }
44.         holder.innerHTML = '';
45.         holder.appendChild(img);
46.     };
47.     reader.readAsDataURL(file);
48.    
49.     return false;
50. };
51. </script>
52.