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

upload_html5_Js.zip

다운로드

 

 

 

 

 

 

 

 

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

 

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

<script type="text/javascript"             src="/js/upload/upload.html5.js"></script>

<link rel="stylesheet" type="text/css"  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' : getDr_rowid_val(), 

'dr_title' :   getDr_title_val()     }; 

   },

            'onUploadComplete' : function(file, data) {

                

            }

        });

 

});

</script>

 

 

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

 

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

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

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

 

 

크롬 및 IE10 이상 작동함.

 

 

https://drive.google.com/open?id=0B0nmKWyPwosjcFdlVmU1ekJfSE0