Nasıl yüklemeden önce dosya boyutunu, resim, yükseklik ve genişlik alınır? nakavt dosyasında bağlama

oy
32

Ben kilobayt görüntü boyutunu ve boyut içinde bayt arasında (yükseklik, genişlik) alabilirim nasıl boyut kontrol etmeniz gerekir? Maksimum dosya boyutu ulaşıldı hata iletisi görüntülenir. Ben sürükle ve bırak resim yüklemesi sonrasında kontrol anlamaya olamaz.

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

Oluştur 25/02/2018 saat 02:34
kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

Sen olarak ayarlanabilir base64 veri olarak görüntüyü okumak için FileReader kullanabilirsiniz srcarasında <img />. Genişlik ve mekanizma aşağıdakiler yüksekliği <img />neye ihtiyacınız vardır.

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

Kod güncelleme. giriş ve sürükle / bırak işi de.

Cevap 25/02/2018 saat 04:19
kaynak kullanıcı

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