[plugin] 파일업로드 upload.html5.js

파일업로드 하는 페이지에서 jquery.form.js와 upload.html5 js, css 를 불러오기 ----------

<script src="/js/jquery.form.js"></script>

<script src="/js/upload/upload.html5.js"></script>

<link rel="stylesheet" href="/js/upload/upload.html5.css">

 

 

 

 

 

파일 업로드 html DIV기본형태 --------------------

<div class="fileUploadBox fileBox" id="fileUploadBox">

     <div class="fileUpload_QueueBox" id="fileUpload_Queue">

     </div>

     <div class="fileUpload_buttons" id="fileUpload_buttons">

        <input id="file_uploadbtn" name="file_uploadbtn" type="file" style="display:none;'">

	<a class="start_uploadbtn"style="" href="javascript:$('#file_uploadbtn').uploadHtml5('upload')">전송</a>

     </div>

</div>

 

 

input[file] 버튼에 걸어준다. ----------------------------

<script>

$(document).ready(function(){
    $('#file_uploadbtn').uploadHtml5({

                'auto'         : false,

                //'formData'     : { 'key' : 'text' },

                'fileType' : 'jpg,jpeg,png,gif,bmp',

                'fileSizeLimit' : 8000*1024, // KB단위 8192 Kb = 8 Mb , 8000*1024 (8기가)

                'queueID'      : 'fileUpload_Queue',

                'uploadScript' : url_,

                'dynamicFormData'  : function(){

                 return {  
                    'dr_rowid' : '원하는 키값 value를 파일업로드 시', 
                    'dr_title' : '파라미터 전달'      }; 

                },

                'onUploadComplete' : function(file, data) {

                }

    });
});

</script>

fileType 이 false가 아닌 'jpg,png' 처럼 확장자(소문자로) 사이에 , 를 찍어준다 ( 파일확장자가 대문자일 경우 소문자로 변환 후 체크함)

 

dynamicFormData 는 파일전송모듈을 처음에 불러들일 때와 사용도중 전송해야하는 data 값이 변경될 경우

변경된 값을 전송하기 위함이다.

일반적으로 전송하는 data가 변하지 않는 경우는 formData 옵션을 써도 무방하다.

 

 

크롬 및 IE10 이상 작동함.