JAVASCRIPT/JQUERY/AJAX

[javascript-jQuery] 비동기 방식으로 파일 업로드 하기(파일 확장자, 사이즈 체크 포함, 익스플로러 가능)

최고관리자
2017.12.08 11:24 8,292 0

본문

<!-- 익스플로러 때문에 아래 플러그인을 이용하여 구현 -->

<script type="text/javascript" src="/js/jquery.form.js"></script>


// 스크립트

function upload_submit(){

var uf = document.uploadForm;

//var form = $("#uploadForm");

var formData = new FormData(document.getElementById('uploadForm'));


var user_file = uf.file.value;

if(user_file == ""){

alert("이미지 파일을 선택하여 주세요.");

return false;

}


// 파일 확장자 체크

// var thumbext = document.getElementById('file').value; //파일을 추가한 input 박스의 값

fileExt = user_file.slice(user_file.indexOf(".") + 1).toLowerCase(); //파일 확장자를 잘라내고, 비교를 위해 소문자로 만듭니다.

if(fileExt != "jpg" && fileExt != "png" &&  fileExt != "gif" &&  fileExt != "bmp"){ //확장자를 확인합니다.

alert('파일첨부는 이미지 파일(jpg, png, gif, bmp)만 등록 가능합니다.');

return false;

}


// 사이즈체크

var file = uf.file;

var maxSize  = 2 * 1024 * 1024 // 2MB

var fileSize = 0;


// 브라우저 확인

var browser = navigator.appName;


// 익스플로러일 경우

if(browser == "Microsoft Internet Explorer"){

var oas = new ActiveXObject("Scripting.FileSystemObject");

fileSize = oas.getFile( file.value ).size;

}else{

// 익스플로러가 아닐경우

//fileSize = file.files[0].size;

fileSize = file.files[0].size;

}


// 업로드한 파일 MB로 변환

var fileSize2 = (fileSize / 1024) / 1024

// 소수점 2자리에서 반올림

var fileSize_mb = fileSize2.toFixed(2);


//alert("파일사이즈 : "+ fileSize +", 최대파일사이즈 : 5MB");


if(fileSize > maxSize){

alert("첨부하신 파일 사이즈는 "+ fileSize_mb +"MB 입니다.\n첨부하실 파일 사이즈는 2MB 이내로 등록 가능합니다.");

return false;

}


      //ajax form submit

$('#uploadForm').ajaxForm({

url : "livechat_insert.asp?mode=upload",

// beforeSubmit: function (data,form,option) {

// //validation체크 

// //막기위해서는 return false를 잡아주면됨

// return true;

// },

success: function(data){

uf.file.value = "";

$("#file_route1").val("");

},

error: function(){

//에러발생을 위한 code페이지

}

}).submit();


      /*

$.ajax({          

url : "livechat_insert.asp?mode=upload",

processData : false,

contentType : false,

data : formData,

type : "POST",

error : function(){

//alert('통신을 실패했습니다. 다시 접속해 주세요.');

},

success : function(data){

uf.file.value = "";

$("#file_route1").val("");

}

});

      */

}


<!-- html-->

<label class="tran_03">

파일선택

<input type="file" name="file" onchange="javascript:document.getElementById('file_route1').value=this.value">

</label>

<input type="text" readonly="readonly" title="File Route" id="file_route1" placeholder="파일을 선택해 주세요.">

<span class="file_send tran_03" onclick="upload_submit();">전송</span>


댓글목록 0

등록된 댓글이 없습니다.