심재운 블로그


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


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