कैसे अपलोड करने से पहले फ़ाइल आकार, छवि, ऊंचाई और चौड़ाई प्राप्त करने के लिए? नॉकआउट फ़ाइल में बाध्यकारी

Question

कैसे अपलोड करने से पहले फ़ाइल आकार, छवि, ऊंचाई और चौड़ाई प्राप्त करने के लिए? नॉकआउट फ़ाइल में बाध्यकारी

वोट

32

मैं किलोबाइट में छवि का आकार और आयाम (ऊंचाई, चौड़ाई) में बाइट्स के आकार मैं कैसे प्राप्त कर सकते हैं की जाँच करने की जरूरत है? फ़ाइल का अधिकतम आकार तक पहुँच त्रुटि संदेश प्रदर्शित किया जाना चाहिए। मैं समझ नहीं खींचें और छोड़ें छवि अपलोड करने के बाद जांच करने का तरीका।

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

आप base64 डेटा जो के रूप में स्थापित किया जा सकता है के रूप में छवि को पढ़ने के लिए उपयोग कर सकते हैं FileReader srcकी <img />। चौड़ाई और The की ऊंचाई <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>

कोड अद्यतन। इनपुट और खींचें / ड्रॉप काम दोनों।