Hoe kan ik de bestandsgrootte, beeld, hoogte en breedte te krijgen voordat het uploaden? in knock-out bestand binding

stemmen
32

Ik moet de beeldgrootte in kilobyte en de afmeting (hoogte, breedte) Hoe kan ik de grootte van de in bytes controleren? Max bestandsgrootte bereikt foutbericht moet worden weergegeven. Ik kan niet achterhalen hoe om te checken na Drag and Drop het uploaden.

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

De vraag is gesteld op 25/02/2018 om 02:34
user
In andere talen...                            


1 antwoorden

stemmen
0

U kunt FileReader gebruiken om het beeld als base64 gegevens die kunnen worden ingesteld als het lezen srcvan <img />. De breedte en hoogte van het <img />zijn wat je nodig hebt.

<!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-update. Zowel invoer als drag / drop werk.

antwoordde op 25/02/2018 om 04:19
bron van user

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