Upload eine Datei


#1
Ich habe ein Formular um ein Foto hochzuladen.
Ich gehe mit der Maus über den Button und es erscheint "Keine Datei ausgewählt".
Nachdem ich eine Datei ausgewählt habe, wird die gewählte Datei angezeigt z.B. "myfoto.jpg".

Wie kann ich abfragen, ob schon eine Datei ausgewählt wurde bevor ich den submit button klicke, denn der weitere Verlauf ist davon abhängig.
 
Zuletzt bearbeitet:

guenter024

Erfahrenes Mitglied
#2
Dies ist mittels Forularvalidierung mit Javscript möglich:
Beispiel:
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
 <title>Uploadformular</title>
</head>
<body>
<form class="uploadform" onsubmit="return pruefe_form()">
      <fieldset>
        <input type="file" class="image" />
        <button>Absenden</button>
      </fieldset>
</form>
<script type="text/javascript" src="../javascript/jquery.min.js"></script>
<script type="text/javascript">
var pruefe_form = function() {
    var image = $('.image');
    if(image.val() == '') {
        console.log('Bitte geben Sie eine Bilddatei an.');
        return false;
    }
    return true;
}
</script>
</body>
</html>

Allerdings muss in jedem Fall auch eine Serverseitige Prüfung vorgenommen werden, die im Fehlerfall das Formular wieder zurückgibt.
Außerdem sollte auch der Dateityp geprüft werden.
 
#3
guenter024,
Danke ... ja und nein ...
Ersteinmal funktioniert Dein Beispiel nicht.

console.log('Bitte geben Sie eine Bilddatei an.'); wird nicht ausgegeben.

Dann weiss ich natürlich nicht , wie Du
class="image"
definiert hast.

Das wichtigste ist, dass ich keinerlei Info über das selected File benötige, sondern nur ob oder nicht ausgewählt wurde.
Also onsubmit - oder vielleicht besser onchange nach der Auswahl - true bei Auswahl.

Und danach das leidige Problem, diesen js ReturnWert mit php weiterzuverarbeiten (wenn das überhaupt möglich ist - Server Client).
Nochmals Dank.
 

basti1012

Erfahrenes Mitglied
#4
Sein Script funktioniert soweit beimir.
Aber versuche mal das hier ,vieleicht ist das einfacher für dich
Javascript:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
 <title>Uploadformular</title>
</head>
<body>
<form class="uploadform" onsubmit="return pruefe_form()">
      <fieldset>
        <input type="file" class="image" />
        <button>Absenden</button>
      </fieldset>
</form>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var pruefe_form = function() {
    var image = $('.image');
    if(image.val() != '') {
        var ok = confirm("Klicke Ok um den Upload zu starten");

        if (ok ==false) {
              return false;
        }
    }else{
         alert('keine Datei ausgewählt')
    }
}
</script>
</body>
</html>
 
#6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<input type="file" id="fileInput" name="Datei" accept="image/png, image/jpeg, image/gif ">
<br><br>
<div id="selectedFile"></div>

<script type="text/javascript">

(function(id1,id2) {
var el = document.getElementById(id1);

if(el) {
el.onchange = function () {
var fileName = "true";
document.getElementById(id2).innerHTML = fileName; }}

})('fileInput','selectedFile');

</script>

</body>
</html>

So 'etwa'.
Dies script zeigt, dass ein Image gewählt wurde.
Nun aber, wie den positiven Input auswerten ?, da davon der Aufbau meines Formulars abhängig ist.
 

basti1012

Erfahrenes Mitglied
#7
Einfacher für dich ist so gemeint ,das ab und zu nur nee kleine änderung bei einigen Leuten,der Groschen schon fallen tut. Das wahr jetzt nicht negativ gemeint.
Aber was meinst du jetzt mit auswerten? Was willst du den genau auswerten ?
Wahrscheinlich meinst du type,größe usw und das vor dem Uploden ? Weil nach den Uploaden ist eine auswertung mit php ja kein Problem mehr.

Was brauchst du den für auswertungen vor den Uploaden?
Wollen wa mal kucken was man da machen kann ?
 
#9
Was brauchst du den für auswertungen vor den Uploaden?
Wollen wa mal kucken was man da machen kann ?[/QUOTE]

Erst 'mal Danke,
ok. "auswerten ist vielleicht nicht der richtige Ausdruck.
Das Uploadformular bietet die Möglichkeit, ein File (Image) und einen Text (TextArea) hochzuladen.
Also entweder Foto u.a. oder Text ODER beides.

Etwa:
If ein Foto ist selected, erscheint eine Textarea ohne 'required'.
If kein Foto ist selected, erscheint eine Textarea mit required.
(Eine Option MUSS).

Das soll nur verhindern, dass unnötigerweise (aus Versehen z.B. auf Submit geklickt wird.
Ist zwar keine 'Katastrophe', das Uploadscript regelt es ja eh, durch Warnung oder direkte Rückkehr, ist aber eben unnötig.

Vielleicht weisst Du eine 'einfachere' Lösung.

P.S.
Nach wie vor bin ich verblüfft, dass es keine simple Abfrage über den Zustand des
<input type="file"
gibt.
Html kennt den Zustand ja, denn er wird angezeigt ... "Kein File ausgewählt" oder die Anzeige des gewälten Image.

C u.a. oder Assembler.
Die GetOpenFileName Funktion gibt in einer var alle notwenige Info zurück.
 
Zuletzt bearbeitet:
#10
Das einzigste was mir jetzt einfällt zu deinen Angaben ist das
http://sebastian1012.bplaced.net/ho...ipte-august2018-2/datei-upload-javascript.php

Danke,
so ähnlich.
Das Zeigen der Datei ist kein Problem.
Die Abfrage, ob oder nicht, ist mir rätselhaft.


Nach wie vor bin ich verblüfft, dass es keine simple Abfrage über den Zustand des
<input type="file"
gibt.
Html kennt den Zustand ja, denn er wird angezeigt ... "Kein File ausgewählt" oder die Anzeige des gewälten Image.

C u.a. oder Assembler.
Die GetOpenFileName Funktion gibt in einer var alle notwenige Info zurück.
 

Sempervivum

Erfahrenes Mitglied
#12
Nach wie vor bin ich verblüfft, dass es keine simple Abfrage über den Zustand des
<input type="file"
gibt.
Doch, die gibt es:
Javascript:
<script type="text/javascript">

(function(id1,id2) {
    var el = document.getElementById(id1);

    if(el) {
        el.onchange = function () {
            if (this.files.length > 0) {
                console.log("Datei " + this.files[0].name + " ausgewählt");
                console.log("Größe der Datei: " + this.files[0].size);
                var fileName = "true";
                document.getElementById(id2).innerHTML = fileName;
            }
        }
    }
})('fileInput','selectedFile');

</script>
 
Zuletzt bearbeitet:
#13
Doch, die gibt es:
Javascript:
<script type="text/javascript">

(function(id1,id2) {
    var el = document.getElementById(id1);

    if(el) {
        el.onchange = function () {
            if (this.files.length > 0) {
                console.log("Datei " + this.files[0].name + " ausgewählt");
                console.log("Größe der Datei: " + this.files[0].size);
                var fileName = "true";
                document.getElementById(id2).innerHTML = fileName;
            }
        }
    }
})('fileInput','selectedFile');

</script>
/////////////////////////////////////////////////
Ja,, diese habe ich selber ja schon vor 2 Tagen gepostet.
Funktioniert bestens, ist aber für meine Idee auch nicht hilfreich
 
#18
Sempervivum,

dies reicht für das, was ich will:
(function(id1,id2) {
var el = document.getElementById(id1);

if(el) {
el.onchange = function () {
var value = 1;
document.getElementById(id2).innerHTML = value; }}
})('fileInput','selectedFile');

Aber immer noch der wichtigste Punkt.
Wie verarbeite ich nun 1 oder true ?

Etwa:
If ein Foto ist selected (1 oder true), erscheint eine Textarea ohne 'required'.
If kein Foto ist selected, erscheint eine Textarea mit required.
(Eine Option MUSS).

Wahrscheinlich fange ich an zu nerven.
 

Sempervivum

Erfahrenes Mitglied
#19
If kein Foto ist selected, erscheint eine Textarea mit required.
Das ist ja der Grundzustand beim Laden der Seite. Entsprechend gibt es hierfür kein Event, bei dem man dies abfragen und die Textarea anzeigen könnte, es sei denn das Laden der Seite. D. h. Du kannst diese gleich anzeigen und mit required versehen.

If ein Foto ist selected (1 oder true), erscheint eine Textarea ohne 'required'.
Entsprechend brauchst Du nur im Code von oben beim onchange das Attribut required zu löschen.

Es sei denn, ich verstehe dich falsch und Du möchtest diese Prüfung und das Einblenden der Textarea erst beim Submit machen.
 
#20
Es sei denn, ich verstehe dich falsch und Du möchtest diese Prüfung und das Einblenden der Textarea erst beim Submit machen.[/QUOTE]

Nein, Verzeihung, das habe ich mehrere Male betont. Nichts hat hier mit submit zu tun.

Entsprechend brauchst Du nur im Code von oben beim onchange das Attribut required zu löschen.
???
Wer, wie soll den im Quellcode geschriebenen Text löschen.

Ich denke, ich gebe es auf und mache es anders.
Ich komme mir langsam blöd vor .
Offensichtlich versteht mich keiner und das ist immer !! unbefriedigend.
Nochmals Dank.