Daily coding

JSP : 이미지 첨부 후 미리보기 본문

Front-end/JSP

JSP : 이미지 첨부 후 미리보기

sunnnkim 2020. 2. 13. 12:05

<script type="text/javascript">
/* 
$(function(){
    $("#btn").click(function(){
	    	$("#file").trigger("click");
	        var form = $('form')[0];
	        var formData = new FormData(form);
	            $.ajax({
	               url: './file_upload.jsp',
	               processData: false,
	               contentType: false,
	               data: formData,
	               type: 'POST',
	               success: function(result){
	                   alert("업로드 성공!!");
	                   window.reload;
	              }
		});
	});
}); */

var sel_file;

$(document).ready(function() {
    $("#input_img").on("change", handleImgFileSelect);
}); 

function handleImgFileSelect(e) {
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);

    filesArr.forEach(function(f) {
        if(!f.type.match("image.*")) {
            alert("확장자는 이미지 확장자만 가능합니다.");
            return;
        }

        sel_file = f;

        var reader = new FileReader();
        reader.onload = function(e) {
            $("#img").attr("src", e.target.result);
           //$("#none-pic").hide();
        }
        reader.readAsDataURL(f);
    });
}

</script>

'Front-end > JSP' 카테고리의 다른 글

JSP : EL 태그  (0) 2020.01.23