So validieren Sie ein Datei-Upload-Feld mit Javascript/jquery

Question 1

Wie kann ich überprüfen, ob der Benutzer eine Datei zum Hochladen ausgewählt hat?

Edit: gestoßen

Question 2

Überprüfe es value Eigentum:

In jQuery (da Ihr Tag es erwähnt):

$('#fileInput').val()

Oder in Vanille-JavaScript:

document.getElementById('myFileInput').value

Question 3

Meine Funktion prüft, ob der Benutzer die Datei ausgewählt hat oder nicht, und Sie können auch prüfen, ob Sie diese Dateierweiterung zulassen möchten oder nicht.

Versuche dies:

<input type="file" name="fileUpload" onchange="validate_fileupload(this.value);">

function validate_fileupload(fileName)
{
    var allowed_extensions = new Array("jpg","png","gif");
    var file_extension = fileName.split('.').pop().toLowerCase(); // split function will split the filename by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the filename.

    for(var i = 0; i <= allowed_extensions.length; i++)
    {
        if(allowed_extensions[i]==file_extension)
        {
            return true; // valid file extension
        }
    }

    return false;
}

Question 4

Aufbauend auf Ravinders Lösung stoppt dieser Code das Absenden des Formulars. Es kann ratsam sein, die Erweiterung auch auf der Serverseite zu überprüfen. Hacker können also nichts hochladen, was sie wollen.

<script>
var valid = false;

function validate_fileupload(input_element)
{
    var el = document.getElementById("feedback");
    var fileName = input_element.value;
    var allowed_extensions = new Array("jpg","png","gif");
    var file_extension = fileName.split('.').pop(); 
    for(var i = 0; i < allowed_extensions.length; i++)
    {
        if(allowed_extensions[i]==file_extension)
        {
            valid = true; // valid file extension
            el.innerHTML = "";
            return;
        }
    }
    el.innerHTML="Invalid file";
    valid = false;
}

function valid_form()
{
    return valid;
}
</script>

<div id="feedback" style="color: red;"></div>
<form method="post" action="/image" enctype="multipart/form-data">
  <input type="file" name="fileName" accept=".jpg,.png,.bmp" onchange="validate_fileupload(this);"/>
  <input id="uploadsubmit" type="submit" value="UPLOAD IMAGE" onclick="return valid_form();"/>
</form>

Question 5

Zumindest in Firefox sagt mir der DOM-Inspektor, dass die Dateieingabeelemente eine Eigenschaft namens haben files. Sie sollten in der Lage sein, seine Länge zu überprüfen.

document.getElementById('myFileInput').files.length

Question 6

Ich habe das aus irgendeinem Forum. Ich hoffe, es wird für Sie nützlich sein.

<script type="text/javascript">
 function validateFileExtension(fld) {
    if(!/(\.bmp|\.gif|\.jpg|\.jpeg)$/i.test(fld.value)) {
        alert("Invalid image file type.");      
        fld.form.reset();
        fld.focus();        
        return false;   
    }   
    return true; 
 } </script> </head>
 <body> <form ...etc...  onsubmit="return
 validateFileExtension(this.fileField)"> <p> <input type="file"
 name="fileField"  onchange="return validateFileExtension(this)">
 <input type="submit" value="Submit"> </p> </form> </body>

Question 7

Einfacher und leistungsfähiger Weg (dynamische Validierung)

Platzieren Sie Formate in einem Array wie “image/*”

var upload=document.getElementById("upload");
var array=["video/mp4","image/png"];
upload.accept=array;
upload.addEventListener("change",()=>{

console.log(upload.value)
})

<input type="file" id="upload" >