Come ottenere la dimensione del file, immagini, altezza e larghezza prima del caricamento? nel file di eliminazione diretta vincolante

voti
32

Ho bisogno di controllare le dimensioni dell'immagine in kilobyte e la dimensione (altezza, larghezza) Come posso ottenere la dimensione della a byte? deve essere visualizzato Dimensione massima file raggiunta messaggio di errore. Io non riesco a capire come controllare dopo Drag and Drop caricamento delle immagini.

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

controllare codepen.io

È pubblicato 25/02/2018 alle 02:34
dall'utente
In altre lingue...                            


1 risposte

voti
0

È possibile utilizzare FileReader per leggere l'immagine come dati Base64 che può essere impostato come srcdi <img />. La larghezza e l'altezza del <img />sono quello che ti serve.

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

aggiornamento del codice. Sia di input e lavoro drag / drop.

Risposto il 25/02/2018 a 04:19
fonte dall'utente

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more