上传前如何获取文件大小、图片、高度和宽度？在敲除文件绑定中答案

【问题标题】：How to get file size, image ,height and width before upload? in knockout file binding上传前如何获取文件大小、图片、高度和宽度？在敲除文件绑定中
【发布时间】：2018-08-04 19:58:18
【问题描述】：

我需要检查图像大小（以千字节为单位）和尺寸（高度、宽度）如何获得以字节为单位的大小？应显示“达到最大文件大小”错误消息。我不知道如何在拖放图片上传后进行检查。

$('#fileinput').bind('change', function() {
            alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
        });
        
            $(function(){
      var viewModel = {};
      viewModel.fileData = ko.observable({
      dataURL: ko.observable(),
      // base64String: ko.observable(),
      });
    viewModel.multiFileData = ko.observable({
     dataURLArray: ko.observableArray(),
     });
     viewModel.onClear = function(fileData){
        if(confirm('Are you sure?')){
         fileData.clear && fileData.clear();
        }                            
     };
     viewModel.debug = function(){
      window.viewModel = viewModel;
      console.log(ko.toJSON(viewModel));
      debugger; 
      };
      ko.applyBindings(viewModel);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/adrotec/knockout-file-bindings/master/knockout-file-bindings.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="https://rawgit.com/adrotec/knockout-file-bindings/master/knockout-file-bindings.js"></script>




    <div class="well" data-bind="fileDrag: fileData">
    <div class="form-group row">
        <div class="col-md-6">
            <img style="height: 125px;" class="img-rounded  thumb" data-bind="attr: { src: fileData().dataURL }, visible: fileData().dataURL">
            <div data-bind="ifnot: fileData().dataURL">
                <label class="drag-label"> Drag file here</label>
            </div>
        </div>
        <div class="col-md-6">
            <input type="file" id="fileinput" data-bind="fileInput: fileData, customFileInput: {
              buttonClass: 'btn btn-success',
              fileNameClass: 'disabled form-control',
              onClear: onClear,
            }" accept="image/*">
        </div>
    </div>
</div>

check codepen.io

【问题讨论】：

标签： javascript html validation knockout.js

【解决方案1】：

您可以使用 FileReader 将图像读取为 base64 数据，可以设置为<img /> 的src。 <img />的宽高是你需要的。

<!doctype html>
<html>
  <body>
    <div>
      <input type="file" />
      <div id="preview">
        file size: <span id="file-size"></span><br />
        image preview: <img id="img" /><br />
        image size: <span id="image-size"></span>
      </div>
    </div>
    <script>
      const img = document.getElementById('img')

      document.addEventListener('dropenter', e => e.preventDefault())
      document.addEventListener('dragover', e => e.preventDefault())

      function renderImage(file) {
        document.getElementById('file-size').innerText = file.size
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = e => {
          img.src = e.target.result
          img.onload = () => document.getElementById('image-size').innerText = `${img.width}x${img.height}`
        }
      }

      document.addEventListener('drop' , e => {
        e.preventDefault()

        renderImage(e.dataTransfer.files[0])
      })

      document.querySelector('input').addEventListener('change', e => {
        renderImage(e.target.files[0])
      })
    </script>
  </body>
</html>

代码更新。输入和拖放都有效。

【讨论】：

感谢您的回答，但拖放后，“输入”选择器不会触发您的代码。:(
@eunsang 您可以从放置事件对象访问包含文件对象的dataTransfer 。