Wie Dateigröße, Bild, Höhe und Breite vor dem Hochladen zu bekommen? in Knockout-Dateibindung

Question

Wie Dateigröße, Bild, Höhe und Breite vor dem Hochladen zu bekommen? in Knockout-Dateibindung

stimmen

32

Ich brauche die Bildgröße in Kilobyte und die Dimension (Höhe, Breite) überprüfen Wie kann ich die Größe des in Bytes bekommen? „Max Dateigröße erreicht“ Fehlermeldung angezeigt werden soll. Ich kann nicht herausfinden, wie nach dem Drag & Drop-Bild-Upload zu überprüfen.

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

überprüfen codepen.io

javascript html validation knockout.js

Veröffentlicht am 25/02/2018 um 02:34
vom benutzer eunsang

In anderen Sprachen...

1 antworten

ladjzero · Answer 1 · 2018-02-25 04:19

Sie können Filereader verwenden Sie das Bild als base64 Daten zu lesen , die als gesetzt werden kann srcvon <img />. Die Breite und Höhe der <img />ist , was Sie brauchen.

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

Code zu aktualisieren. Sowohl Ein- und Drag / Drop-Arbeit.