Bedingte Warnungen basierend auf Dateityp Upload

Question

Hallo allerseits und danke für Ihren Patienten, weil: zuerst, das ist meine erste Frage, so lassen Sie mich wissen, dass ich einen Fehler mache. zweitens, ich bin ein javascript/jquery noob.

Ich habe einen JavaScript-Code geschrieben, der nach Bildupload sucht und verschiedene Warnmeldungen basierend auf dem Ergebnis des Checks ausführt.

Das Skript muss beide Dateitypen (Bild und PDF) validieren. Aber für Bilder muss es Größe und Dimensionen validieren. Für PDF muss nur die Größe validiert werden.

So etwas wie "wenn Bild ist dann überprüfen Breite Höhe und Größe" "Wenn nicht ein Bild, aber es ist ein PDF dann überprüfen Sie die Dateigröße" und "wenn kein Bild ist und wenn ist kein pdf dann Rückkehr Dateityp Fehler"

Jetzt möchte ich pdf beim Hochladen erlauben und seine Größe überprüfen und dann eine Warnung zurückgeben.

Aber ich weiß wirklich nicht, wie man verschiedene Dateitypen programmatisch unterscheidet.

Hier ist meine Original-Code:

jQuery(document).ready(function($) { 
 

 
    var _URL = window.URL || window.webkitURL; 
 
    var submits = document.getElementsByClassName('gform_button'); 
 
    var submit = submits[0]; 
 

 
    $(".customUpload input:file").click(function(e) { 
 
     this.value = ""; 
 
     submit.disabled = false; 
 
    }); 
 
    $(".customUpload input:file").change(function(e) { 
 
     var file, img; 
 
     var width, height, size, sizeInMB; 
 

 
     if ((file = this.files[0])) { 
 
      img = new Image(); 
 
      img.onload = function() { 
 
       width = this.width; 
 
       height = this.height; 
 
       size = this.size; 
 
       sizeInMB = (size/(1024*1024)).toFixed(2); 
 
       if (sizeInMB > 20) { 
 
        alert("File is to big"); 
 
        submit.disabled = true; 
 
       } 
 
       if (width < 300 || height < 300) { 
 
        alert("Image size is lower than 300px"); 
 
       \t  submit.disabled = true; 
 
       }; 
 
      }; 
 
      img.onerror = function() { 
 
       alert("not a valid file: " + file.type); 
 
       submit.disabled = true; 
 
      }; 
 
      img.src = _URL.createObjectURL(file); 
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="customUpload"> 
 
    <form action="" class="cart"> 
 
    <input type="file" id="file" /> <!-- accept="image/gif, image/jpeg, image/png, image/tiff" --> 
 
    <button type="submit" id ="submit" name="submit" class="single_add_to_cart_button gform_button">SUBMIT</button> 
 
    </form> 
 
</div>

Vielen Dank an alle und einen guten Tag haben.

Answer 1

Ich habe diesen Code, um die Erweiterung zu erhalten (mit dem Punkt) und die Größe

var fileExtension = file.name.substr(file.name.length - 4, 4); 
var fileSize = file.size; 

jQuery(document).ready(function($) { 
 

 
    var _URL = window.URL || window.webkitURL; 
 
    var submits = document.getElementsByClassName('gform_button'); 
 
    var submit = submits[0]; 
 

 
    $(".customUpload input:file").click(function(e) { 
 
     this.value = ""; 
 
     submit.disabled = false; 
 
    }); 
 
    $(".customUpload input:file").change(function(e) { 
 
     var file, img; 
 
     var width, height, size, sizeInMB; 
 
     if ((file = this.files[0])) { 
 
      var fileExtension = file.name.substr(file.name.length - 4, 4); 
 
      var fileSize = file.size; 
 
      
 
      alert(fileExtension + " file with size of " + fileSize); 
 
      
 
      img = new Image(); 
 
      img.onload = function() { 
 
       width = this.width; 
 
       height = this.height; 
 
       size = file.size; 
 
       sizeInMB = (size/(1024*1024)).toFixed(2); 
 
       if (sizeInMB > 20) { 
 
        alert("File is to big"); 
 
        submit.disabled = true; 
 
       } 
 
       if (width < 300 || height < 300) { 
 
        alert("Image size is lower than 300px"); 
 
       \t  submit.disabled = true; 
 
       }; 
 
      }; 
 
      img.onerror = function() { 
 
       alert("not a valid file: " + file.type); 
 
       submit.disabled = true; 
 
      }; 
 
      img.src = _URL.createObjectURL(file); 
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="customUpload"> 
 
    <form action="" class="cart"> 
 
    <input type="file" id="file" /> <!-- accept="image/gif, image/jpeg, image/png, image/tiff" --> 
 
    <button type="submit" id ="submit" name="submit" class="single_add_to_cart_button gform_button">SUBMIT</button> 
 
    </form> 
 
</div>