jQuery 로 파일 업로드 라이브러리 FileUp

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);

086
      $file.find('.controls .abort').hide();

087
      $file.find('.controls .upload').hide();

088
      $file.find('.result')

089
          .removeClass('error')

090
          .addClass('success')

091
          .text(i18n[options.lang].complete);

092
  },

093
  onDragOver:function(event) {

094
      event.stopPropagation();

095
      event.preventDefault();

096
      event.dataTransfer.dropEffect ='copy';

097
  },

098
  onDragLeave:function(event) {},

099
  onDragEnd:function(event) {},

100
  onDragEnter:function(event) {

101
      event.stopPropagation();

102
      event.preventDefault();

103
      event.dataTransfer.dropEffect ='copy';

104
  }

105
});

This awesome jQuery plugin is developed by shabuninil. For more Advanced Usages, please check the demo page or visit the official website.

저작자표시 비영리 동일조건

'프로그래밍 > jQuery 👍' 카테고리의 다른 글

jQuery 로 구현한 querystring url 파싱 parse 하는 방법 (0)	2017.09.12
jQuery append 행추가 및 삭제 (0)	2017.09.05
jQuery 로 파일 업로드 file upload 로딩바 loading bar 구현하기 (0)	2017.07.11
Amazon S3 를 javascript 자바스크립트로 upload 업로드 하기 (0)	2017.07.04
랜덤 위치 jQuery (0)	2017.04.12

재우니의 블로그

jQuery 로 파일 업로드 라이브러리 FileUp

Features:

How to use it:

'프로그래밍 > jQuery 👍' 카테고리의 다른 글

티스토리툴바