재우니의 블로그

이태원 참사에 대한 깊은 애도를 표합니다. 티스토리측에서도 공지했듯 이태원 참사 관련으로 콘텐츠를 생산하는분이 없기를 바랍니다.

반응형

 

 

jQuery-AJAX-File-Uploader-FileUp.zip
0.03MB

 

http://www.jqueryscript.net/form/jQuery-AJAX-File-Uploader-FileUp.html

 

Flexible jQuery Based AJAX File Uploader - FileUp

FileUp is a simple, flexible, customizable jQuery file upload plugin that makes it easy to upload your local files to servers via AJAX requests, with several advanced features.

www.jqueryscript.net

 

jQuery 로 파일 업로드 할때 좋은 라이브러리 인듯 싶네요.

 

 

FileUp is a simple, flexible, customizable jQuery file upload plugin which makes it easy to upload your local files to servers via AJAX requests, with several advanced features.

Features:

  • Drag and drop.
  • Upload multiple files at a time.
  • File upload progress bar.
  • Allows to restrict the file type.
  • Tons of options and events.

How to use it:

1. Load the jQuery FileUp plugin's files in the webpage which has jQuery library loaded:

1 <link href="src/fileup.css" rel="stylesheet">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <script src="src/fileup.js"></script>

2. Insert the file input into a file select button as this:

1 <button type="button" class="fileup-btn">
2   Select file
3   <input type="file" id="upload-demo">
4 </button>

3. Create a DIV container to display the upload status.

1 <div id="upload-demo-queue" class="queue"></div>

4. Initialize the plugin to generate a basic file uploader:

01 $.fileup({
02   url: 'upload.php',
03   inputID: 'upload-demo',
04   queueID: 'upload-demo-queue',
05   onSuccess: function(response, file_number, file) {
06     // do something
07   },
08   onError: function(event, file, file_number) {
09     // do something
10   }
11 });

5. Specify that the server accepts only image files in the file upload.

1 <input type="file" id="upload-demo" multipleaccept="image/*">

6. Customize the file uploader by passing the following options to the fileup function:

01 $.fileup({
02   url: window.location.pathname + window.location.search,
03   inputID: '',
04   queueID: '',
05   dropzoneID: '',
06   fieldName: 'filedata',
07   extraFields: {},
08   lang: 'en',
09   sizeLimit: 0,
10   filesLimit: 0,
11   method: 'post',
12   timeout: null,
13   autostart: false,
14   templateFile: '<div id="file-[INPUT_ID]-[FILE_NUM]" class="fileup-file [TYPE]">' +
15       '<div class="preview">' +
16           '<img src="[PREVIEW_SRC]" alt="[NAME]"/>' +
17       '</div>' +
18       '<div class="data">' +
19           '<div class="description">' +
20               '<span class="file-name">[NAME]</span> (<span class="file-size">[SIZE_HUMAN]</span>)' +
21           '</div>' +
22           '<div class="controls">' +
23               '<span class="remove" onclick="$.fileup(\'[INPUT_ID]\', \'remove\', \'[FILE_NUM]\');" title="[REMOVE]"></span>' +
24               '<span class="upload" onclick="$.fileup(\'[INPUT_ID]\', \'upload\', \'[FILE_NUM]\');">[UPLOAD]</span>' +
25               '<span class="abort" onclick="$.fileup(\'[INPUT_ID]\', \'abort\', \'[FILE_NUM]\');" style="display:none">[ABORT]</span>' +
26           '</div>' +
27           '<div class="result"></div>' +
28           '<div class="fileup-progress">' +
29               '<div class="fileup-progress-bar"></div>' +
30           '</div>' +
31       '</div>' +
32       '<div class="clear"></div>' +
33   '</div>',
34 });

7. Event handlers:

001 $.fileup({
002   onSelect:function(file) {},
003   onRemove:function(file_number, total, file) {},
004   onBeforeStart:function(file_number, xhr, file) {},
005   onStart:function(file_number, file) {},
006   onStartSystem:function(file_number, file) {
007       var options =this.fileup.options;
008       var $file   = $('#file-' + options.inputID +'-' + file_number);
009       $file.find('.controls .upload').hide();
010       $file.find('.controls .abort').show();
011       $file.find('.result')
012           .removeClass('error')
013           .removeClass('success')
014           .text('');
015   },
016   onProgress:function(file_number, ProgressEvent, file) {
017       if (event.lengthComputable) {
018           var options =this.fileup.options;
019           var percent = Math.ceil(ProgressEvent.loaded / ProgressEvent.total * 100);
020           $('#file-' + options.inputID +'-' + file_number +' .fileup-progress-bar').css('width', percent +"%");
021       }
022   },
023   onSuccess:function(file_number, response, file) {},
024   onError:function(event, file, file_number, response) {},
025   onErrorSystem:function(event, file, file_number) {
026       var options =this.fileup.options;
027       switch(event) {
028           case 'files_limit':
029               var message = i18n[options.lang].errorFilesLimit;
030               message = message.replace(/%filesLimit%/g, options.filesLimit);
031               alert(message);
032               break;
033           case 'size_limit':
034               var size    = formatHuman(options.sizeLimit);
035               var message = i18n[options.lang].errorSizeLimit;
036               message = message.replace(/%sizeLimit%/g, size);
037               message = message.replace(/%fileName%/g, file.name);
038               alert(message);
039               break;
040           case 'file_type':
041               var message = i18n[options.lang].errorFileType;
042               message = message.replace(/%fileName%/g, file.name);
043               alert(message);
044               break;
045           case 'bad_status':
046           case 'error_load':
047               var $file = $('#file-' + options.inputID +'-' + file_number);
048               $file.find('.controls .abort').hide();
049               $file.find('.controls .upload').show();
050               $file.find('.result')
051                   .addClass('error')
052                   .text(i18n[options.lang].error);
053               break;
054           case 'old_browser':
055               var message = i18n[options.lang].errorOldBrowser;
056               alert(message);
057               break;
058       }
059   },
060   onAbort:function(file_number, file) {},
061   onAbortSystem:function(file_number, file) {
062       var options =this.fileup.options;
063       var $file   = $('#file-' + options.inputID +'-' + file_number);
064       $file.find('.controls .abort').hide();
065       $file.find('.controls .upload').show();
066       $file.find('.result')
067           .removeClass('error')
068           .removeClass('success')
069           .text('');
070   },
071   onTimeout:function(file_number, file) {},
072   onTimeoutSystem:function(file_number, file) {
073       var options =this.fileup.options;
074       var $file   = $('#file-' + options.inputID +'-' + file_number);
075       $file.find('.controls .abort').hide();
076       $file.find('.controls .upload').show();
077       $file.find('.result')
078           .removeClass('error')
079           .removeClass('success')
080           .text('');
081   },
082   onFinish:function(file_number, file) {},
083   onSuccessSystem:function(response, file_number, file) {
084       var options =this.fileup.options;
085       var $file   = $('#file-' + options.inputID +'-' + file_number);