帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

​​​​​​​FileUp非常方便简单的AJAX多文件上传jQuery插件(可拖拽上传)

帝国模板之家 2020-11-07 网页特效 评论

FileUp是一款简单、灵活、可定制的jQuery文件上载插件,它可以通过AJAX请求轻松地将本地文件上载到服务器,并具有一些高级功能。

功能:

  • 拖拽上传

  • 一次上载多个文件

  • 文件上载进度条

  • 允许限制文件类型

使用方法:

1. 加载jquery库插件文件

<link href="fileup.css" rel="stylesheet">
<script src="jquery.min.js"></script> 
<script src="fileup.js"></script> 

2.添加文件上传按钮

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

3. 创建上传图片显示容器

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

4. 初始化上传图片插件

$.fileup({
  url: 'upload.php',
  inputID: 'upload-demo',
  queueID: 'upload-demo-queue',
  onSuccess: function(response, file_number, file) {
    // do something
  },
  onError: function(event, file, file_number) {
    // do something
  }
});

5. 仅支持上传图片设置

<input type="file" id="upload-demo" multiple accept="image/*">

6. 配置选项

$.fileup({
  url: window.location.pathname + window.location.search,
  inputID: '',
  queueID: '',
  dropzoneID: '',
  files: [],
  fieldName: 'filedata',
  extraFields: {},
  lang: 'en',
  sizeLimit: 0,
  filesLimit: 0,
  method: 'post',
  timeout: null,
  autostart: false,
  templateFile: '<div id="file-[INPUT_ID]-[FILE_NUM]" class="fileup-file [TYPE]">' +
      '<div class="preview">' +
          '<img src="[PREVIEW_SRC]" alt="[NAME]"/>' +
      '</div>' +
      '<div class="data">' +
          '<div class="description">' +
              '<span class="file-name">[NAME]</span> (<span class="file-size">[SIZE_HUMAN]</span>)' +
          '</div>' +
          '<div class="controls">' +
              '<span class="remove" onclick="$.fileup(\'[INPUT_ID]\', \'remove\', \'[FILE_NUM]\');" title="[REMOVE]"></span>' +
              '<span class="upload" onclick="$.fileup(\'[INPUT_ID]\', \'upload\', \'[FILE_NUM]\');">[UPLOAD]</span>' +
              '<span class="abort" onclick="$.fileup(\'[INPUT_ID]\', \'abort\', \'[FILE_NUM]\');" style="display:none">[ABORT]</span>' +
          '</div>' +
          '<div class="result"></div>' +
          '<div class="fileup-progress">' +
              '<div class="fileup-progress-bar"></div>' +
          '</div>' +
      '</div>' +
      '<div class="clear"></div>' +
  '</div>',
});

7.事件处理

$.fileup({
  onSelect: function(file) {},
  onRemove: function(file_number, total, file) {},
  onBeforeRender: function() {},
  onAfterRender: function() {},
  onBeforeStart: function(file_number, xhr, file) {},
  onStart: function(file_number, file) {},
  onStartSystem: function(file_number, file) {
      var options = this.fileup.options;
      var $file   = $('#file-' + options.inputID + '-' + file_number);
      $file.find('.controls .upload').hide();
      $file.find('.controls .abort').show();
      $file.find('.result')
          .removeClass('error')
          .removeClass('success')
          .text('');
  },
  onProgress: function(file_number, ProgressEvent, file) {
      if (event.lengthComputable) {
          var options = this.fileup.options;
          var percent = Math.ceil(ProgressEvent.loaded / ProgressEvent.total * 100);
          $('#file-' + options.inputID + '-' + file_number + ' .fileup-progress-bar').css('width', percent + "%");
      }
  },
  onSuccess: function(file_number, response, file) {},
  onError: function(event, file, file_number, response) {},
  onErrorSystem: function(event, file, file_number) {
      var options = this.fileup.options;
      switch(event) {
          case 'files_limit':
              var message = i18n[options.lang].errorFilesLimit;
              message = message.replace(/%filesLimit%/g, options.filesLimit);
              alert(message);
              break;
          case 'size_limit':
              var size    = formatHuman(options.sizeLimit);
              var message = i18n[options.lang].errorSizeLimit;
              message = message.replace(/%sizeLimit%/g, size);
              message = message.replace(/%fileName%/g, file.name);
              alert(message);
              break;
          case 'file_type':
              var message = i18n[options.lang].errorFileType;
              message = message.replace(/%fileName%/g, file.name);
              alert(message);
              break;
          case 'bad_status':
          case 'error_load':
              var $file = $('#file-' + options.inputID + '-' + file_number);
              $file.find('.controls .abort').hide();
              $file.find('.controls .upload').show();
              $file.find('.result')
                  .addClass('error')
                  .text(i18n[options.lang].error);
              break;
          case 'old_browser':
              var message = i18n[options.lang].errorOldBrowser;
              alert(message);
              break;
      }
  },
  onAbort: function(file_number, file) {},
  onAbortSystem: function(file_number, file) {
      var options = this.fileup.options;
      var $file   = $('#file-' + options.inputID + '-' + file_number);
      $file.find('.controls .abort').hide();
      $file.find('.controls .upload').show();
      $file.find('.result')
          .removeClass('error')
          .removeClass('success')
          .text('');
  },
  onTimeout: function(file_number, file) {},
  onTimeoutSystem: function(file_number, file) {
      var options = this.fileup.options;
      var $file   = $('#file-' + options.inputID + '-' + file_number);
      $file.find('.controls .abort').hide();
      $file.find('.controls .upload').show();
      $file.find('.result')
          .removeClass('error')
          .removeClass('success')
          .text('');
  },
  onFinish: function(file_number, file) {},
  onSuccessSystem: function(response, file_number, file) {
      var options = this.fileup.options;
      var $file   = $('#file-' + options.inputID + '-' + file_number);
      $file.find('.controls .abort').hide();
      $file.find('.controls .upload').hide();
      $file.find('.result')
          .removeClass('error')
          .addClass('success')
          .text(i18n[options.lang].complete);
  },
  onDragOver: function(event) {
      event.stopPropagation();
      event.preventDefault();
      event.dataTransfer.dropEffect = 'copy';
  },
  onDragLeave: function(event) {},
  onDragEnd: function(event) {},
  onDragEnter: function(event) {
      event.stopPropagation();
      event.preventDefault();
      event.dataTransfer.dropEffect = 'copy';
  }
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

不要总是怀疑别人,真诚地接受别人的意见,其实是聪明人的选择。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言