CODEWITHSUNDEEP
javascripthtml
xmaster
xmaster

Reputation: 1050

Javascript image size check (bytes)

I'm having trouble getting my code to work. The first section of my javascript does not work. The last part works but inserts the image after the message.

Could my code be in conflict with my other javascript file? That does not explain why the second part works and add the image anyways though?

My javascript is in the same file as my HTML because otherwise the onload function wouldn't work.

<script> 
window.onload = function(){
    var uploadField = document.getElementById("frontImages");
    uploadField.onchange = function() {
        if(this.files[0].size > 200){
        alert("File is too big!");
        this.value = "";
        };
    };
}
window.onload = function() {
    var uploadField = document.getElementById("itemImages");

    uploadField.onchange = function() {
        if(this.files[0].size > 200){
        alert("File is too big!");
        this.files = "";
        };
    };
}
</script>

My HTML:

<div class="row">
   <div class="col-md-6">
      <label>Front Image:</label>
         <input type="file" name="frontImage[]" id="frontImages" class="form-control uploadButton" required="true">
         <div id="previewFront" class="previewImage">
            <img id="previewFrontImage" style="display: none;" src="#"/>
          </div>
            <label>Please upload a jpg, jpeg, gif or a png file. (MAX 2MB)</label>
          </div>
            <div class="col-md-6">
               <label>Item Image(s):</label>
               <input type="file" name="itemImages[]" id="itemImages" class="form-control uploadButton" multiple="true" required="true">
             <div id="previewItemImages" class="previewItemImage"></div>
                <label>Please upload a jpg, jpeg, gif or a png file. (MAX 2MB)</label>
             </div>
            </div>

Upvotes: 1

Views: 56

Answers (1)

Eugene Chybisov
Eugene Chybisov

Reputation: 1714

You should use 

window.addEventListener("load", function(event) {
    //your code
  });

instead of window.onload, because when you set window.onload second time you overwrite your previously setted function. window.addEventListener allow you to add more than one event.

Documentation: https://developer.mozilla.org/en-US/docs/Web/Events/load

Upvotes: 1

Related Questions