js 批量获取文件信息

忽略大小为10m以上的文件

by 亮 薛

HTML

<form name="uploadForm" action="" autocomplete="off">
  <label></label>
  <input type="file" name="file" multiple>
  <br>
  <div id="img-list">
    
  </div>
  <div class="img-helper"></div>
</form>

CSS

.img-helper {
  display: none;
}

JavaScript

var $file = document.querySelector('input[name="file"]');
      var $uploadBtn = document.querySelector('button[type="button"]');
      var $imgHelper = document.querySelector('.img-helper');
      var $imgList = document.getElementById('img-list');
      $file.addEventListener('change', function(event) {
        var files = event.target.files; //获取文件列表
        var html = ['<label>名称：{{name}}</label><br>',
          '<label>大小：{{filesize}}</label><br>',
          '<label>类型：{{type}}</label><br>',
          '<label>尺寸：{{size}}</label><br><hr>'
        ].join('');
        if (files.length) {
          for (var file of files) {
            if (file.size > (1024 * 1024 * 10)) {
            	continue; // 忽略大小为10m以上的文件
            }
            (function() {
              var reader = new FileReader();
              var f = file;
              reader.onload = function(evt) { //When the read has successfully completed
              	if (!f.type || !f.type.startsWith('image/')) {
                  return;
                }
                var _html = html.replace('{{name}}', f.name).replace('{{filesize}}', f.size / 1024 + 'KB').replace('{{type}}', f.type);
                var result = evt.target.result;
                var $img = document.createElement('img');
                $img.src = result;
                $imgHelper.innerHTML = '';
                $imgHelper.appendChild($img);
                _html = _html.replace('{{size}}', $img.width + 'x' + $img.height);
                var originalHTML = $imgList.innerHTML;
                $imgList.innerHTML = originalHTML + _html;
              }
              reader.readAsDataURL(file);
            })();
          }
          $imgHelper.innerHTML = '';
        }
      });