Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

6/4 uploadAjax.jsp 본문

TIS_2018/응용sw2018_1기

6/4 uploadAjax.jsp

moozi 2018. 6. 4. 10:04

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

.fileDrop{

width:100%;

height:200px;

border:1px solid black;

overflow:auto;

}

</style>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script>

$(document).ready(function(){

function checkImageType(fileName){

var pattern=/jpg|gif|png|jpeg/i;//정규식

return fileName.match(pattern);

}

function getOriginalName(fileName){

if(checkImageType(fileName)){

return;

}

var idx=fileName.indexOf("_")+1;

return fileName.substr(idx);

}

$(".fileDrop").on("dragenter dragover",function(){

//기본이벤트취소.새창이 열리는 것 방지

event.preventDefault();

});

var flag=false;

$(".fileDrop").on("drop",function(event){

//기본이벤트취소.새창이 열리는 것 방지

event.preventDefault();

//파일정보 알아내기

var files=event.originalEvent.dataTransfer.files;

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

var file=files[i];

console.log(file);

} */

var file=files[0];

var formData=new FormData();

formData.append("file",file);

$.ajax({

url:'/uploadAjax',

data:formData,

dataType:'text',

processData:false,

contentType:false,

type:'post',

success:function(data){

var str="";

if(checkImageType(data)){

str="<div>"

+"<img src='displayFile?fileName="+data+"'>"

    +data

    +"</div>";

}else{

str="<div><a href='displayFile?fileName="+data+"'>"

+getOriginalName(data)

+"</a></div>";

}

if(!flag){

$(".fileDrop").empty();

flag=true;

}

$(".fileDrop").append(str);

//$(".uploadedList").append(str);

}

});

});

});

</script>

</head>

<body>

<h3>Ajax File Uplaod</h3>

<div class="fileDrop">이곳에 파일을 끌어다 놓으세요.</div>

<div class="uploadedList"></div>

</body>

</html>

'TIS_2018 > 응용sw2018_1기' 카테고리의 다른 글

하단고정레이아웃  (0) 2018.06.14
jstl 이중for문  (0) 2018.06.12
프로젝트문서  (0) 2018.05.31
5/28 test.jsp  (0) 2018.05.28
프로젝트 팀 구성  (3) 2018.05.24
'TIS_2018/응용sw2018_1기' Related Articles more
Comments