系列文章目录

第十章 Minio WebUploader上传文件的高级用法之进度条显示、文件过滤、图片预览、图片压缩

Minio WebUploader上传文件的高级用法之进度条显示、文件过滤、图片预览、图片压缩

• 系列文章目录
• 进度条显示
• 文件过滤
• 图片预览
• 图片压缩

  ---

  进度条显示

  使用进程文件上传时，进度条显示是一个常用的功能，而WebUploader组件也是支持的。

  文件上传中，Web Uploader会对外派送uploadProgress事件，其中包含文件对象和该文件当前上传进度。

  我们这里只需要在JS中添加以上事件就可以了。

    // 文件上传过程中创建进度条实时显示。
      uploader.on('uploadProgress', function (file, percentage) {
     
       
          let $li = $('#' + file.id),
              $percent = $li.find('.progress .progress-bar');
          // 避免重复创建
          if (!$percent.length) {
     
       
              $percent = $('
  ' +
                  '
  ' +
                  '' +
                  '').appendTo($li).find('.progress-bar');
          }
          $li.find('p.state').text('上传中(' + ((percentage * 100).toFixed(2) + '%') + ')');
          $percent.css('width', percentage * 100 + '%');
      });
  

  注意，这里有一个坑，进度条的样式需要自己配置，所以要在webuploader.css文件中添加以下CSS样式。

  .progress {
     
       
  	height: 20px;
  	margin-bottom: 20px;
  	overflow: hidden;
  	background-color:f5f5f5;
  	border-radius: 4px;
  	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  }
  .progress.active .progress-bar {
     
       
  	-webkit-animation: progress-bar-stripes 2s linear infinite;
  	animation: progress-bar-stripes 2s linear infinite;
  }
  .progress-striped .progress-bar {
     
       
  	background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
  	background-size: 40px 40px;
  }
  .progress-bar {
     
       
  	background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
  	background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
  	background-repeat: repeat-x;
  	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff428bca’,endColorstr=’#ff3071a9’,GradientType=0);
  }
  .progress-bar {
     
       
  	float: left;
  	height: 100%;
  	font-size: 12px;
  	line-height: 20px;
  	color:fff;
  	text-align: center;
  	background-color:428bca;
  	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
  	transition: width .6s ease;
  }
  

  点击上传，进度条就成功显示了

  ---

  文件过滤

  文件过滤可以对添加的文件类型进行限制，比如只能上传图片，这也是一个常用的功能。

  实际使用时，只需要在初始化uploader时，添加accept配置就可以了。比如以下代码表示，只能添加图片。

  // 初始化Web Uploader
      const uploader = WebUploader.create({
     
       
          // swf文件路径
          swf: 'static/Uploader.swf',
          server: '/minio/upload',// 文件接收服务端。
          pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
          method: 'POST', // 文件上传方式，POST或者GET，默认Post
          resize: false,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
          // 只允许选择图片文件。
          accept: {
     
       
              title: 'Images',
              extensions: 'gif,jpg,jpeg,bmp,png',
              mimeTypes: 'image/*'
          }
      });
  

  点击选择文件，发现只能选择图片类型。就算选择到了非图片类型，也无法添加到上传队列中。

  图片预览

  WebUploader支持在添加图片后，展示预览图。监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。 注意这里得到的是Data URL数据，IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

  这里我们添加一个fileQueued事件。

  // 当有文件添加进来的时候
      uploader.on('fileQueued', function (file) {
     
       
          // 缩略图大小
          var ratio = window.devicePixelRatio || 1;
          var thumbnailWidth = 100 * ratio;
          var thumbnailHeight = 100 * ratio;
          var $ = jQuery;
          var $list = $('#list');
          var $li = $(
              '
  ' +
              '' +
              '
  ' + file.name + '' +
              ''
              ),
              $img = $li.find('img');
          // $list为容器jQuery实例
          $list.append($li);
          // 创建缩略图
          // 如果为非图片文件，可以不用调用此方法。
          // thumbnailWidth x thumbnailHeight 为 100 x 100
          uploader.makeThumb(file, function (error, src) {
     
       
              if (error) {
     
       
                  $img.replaceWith('不能预览');
                  return;
              }
              $img.attr('src', src);
          }, thumbnailWidth, thumbnailHeight);
      });
  

  然后点击选择文件，预览图效果就出来了。

  图片压缩

  支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。

  解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。

  只需要在初始化添加compress，配置压缩的图片的选项。如果此选项为false, 则图片在上传前不进行压缩。

  比如以下代码表示对图片进行压缩。

  // 初始化Web Uploader
      const uploader = WebUploader.create({
     
       
          // swf文件路径
          swf: 'static/Uploader.swf',
          server: '/minio/upload',// 文件接收服务端。
          pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
          method: 'POST', // 文件上传方式，POST或者GET，默认Post
          resize: false,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
          compress:
              {
     
       
                  width: 100,
                  height: 100,
                  // 图片质量，只有type为image/jpeg的时候才有效。
                  quality: 50,
                  // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                  allowMagnify: false,
                  // 是否允许裁剪。
                  crop: false,
                  // 是否保留头部meta信息。
                  preserveHeaders: true,
                  // 如果发现压缩后文件大小比原来还大，则使用原来图片
                  // 此属性可能会影响图片自动纠正功能
                  noCompressIfLarger: false,
                  // 单位字节，如果图片大小小于此值，不会采用压缩。
                  compressSize: 0
              }
      });
  

  然后在页面上上传一个170K的文件：

  然后登录Minio，发现图片被压缩到了2.4k。

  ---