Πώς να πάρει το μέγεθος του αρχείου, την εικόνα, το ύψος και το πλάτος πριν από τη μεταφόρτωση; στο αρχείο νοκ-άουτ δέσμευσης

Question

Πώς να πάρει το μέγεθος του αρχείου, την εικόνα, το ύψος και το πλάτος πριν από τη μεταφόρτωση; στο αρχείο νοκ-άουτ δέσμευσης

ψήφοι

32

Θα πρέπει να ελέγξετε το μέγεθος της εικόνας σε kilobyte και τη διάσταση (ύψος, πλάτος) Πώς μπορώ να πάρω το μέγεθος του σε bytes; θα πρέπει να εμφανίζεται «Μέγιστο μέγεθος αρχείου φτάσει» μήνυμα λάθους. Δεν μπορώ να καταλάβω πώς να ελέγξει μετά Drag and Drop μεταφόρτωσης της εικόνας.

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

ελέγξτε codepen.io

javascript html validation knockout.js

Δημοσιεύθηκε 25/02/2018 στις 02:34
χρήστη eunsang

Σε άλλες γλώσσες...

1 απαντήσεις

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

Μπορείτε να χρησιμοποιήσετε FileReader για να διαβάσετε την εικόνα ως δεδομένα base64 η οποία μπορεί να οριστεί ως srcτης <img />. Το πλάτος και το ύψος του <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>

ενημέρωση κώδικα. Τόσο η είσοδος και το έργο drag / drop.