Question

我需要检查图像大小（千字节）和尺寸（高度，宽度）如何获得以字节为单位的大小？＆＃34;达到最大文件大小＆＃34;应显示错误消息。我无法弄清楚如何在拖放图片上传后进行检查。

＆＃13;

$('#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);
    });

＆＃13;

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

＆＃13;

check codepen.io

Answer 1

您可以使用FileReader将图像读取为base64数据，可将其设置为src的{{1}}。 <img />的宽度和高度是您所需要的。

＆＃13;

<img />

＆＃13;

代码更新。输入和拖放都可以工作。

如何在上传之前获取文件大小，图像，高度和宽度？在淘汰文件绑定中

1 个答案: