[javascript-jQuery] 비동기 방식으로 파일 업로드 하기(파일 확장자, 사이즈 체크 포함, 익스플로러 가능)
-
- 첨부파일 : jquery.form.js (40.6K) - 다운로드
본문
<!-- 익스플로러 때문에 아래 플러그인을 이용하여 구현 -->
<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