Beiträge von busgi

Zitat von m.scatello

Dann benutze doch Datatables

so wie ich es gelesen habe ist Datatables ein Library für JQuery.
Ich bräuchte Ansätze für pur Javascript um zu sehen, wie ich sowas aufbauen könnte.

Zitat von Sempervivum

1. Eine Tabelle mit nur einer Spalte würde wenig Sinn machen, ich vermute, Du hast mehr und es gekürzt, damit der Code nicht zu lang wird?

2. Du schreibst, Du willst die Elemente auf Seite 2 bekommen. Meinst Du damit wirklich eine zweite HTML-Seite oder dass auf der selben Seite jeweils nur ein Abschnitt sichtbar ist und man diesen mit dem Button auswählen kann (etwa so wie es datatables macht)?

Wobei ich letzteres empfehlen würde. Und überlegen ob es angebracht ist, Datatables zu verwenden.

zu 1: ja genau. ich habe den code abgekürzt

zu 2: ich möchte auf keinen fall eine zweite html seite. es soll genauso sein wie bei den datatables, wo man mit den buttons hin und her wechselt.

Hallo,

ich habe eine tabelle, wo ich dynamisch texte einfügen kann.

Nun möchte ich eine zweite seite hinzufügen sobald ich 5 tabelleneinträge habe.

somit soll auch ein button mit seite 2 erscheinen und die ältesten einträge sich in der zweiten seite befinden.

wie könnte ich das realisieren?

momentan kann ich dynamisch einträge eintragen. nur weiß ich nicht wie ich die elemente auf seite 2 kriege. desweiteren möchte ich auch zwischen den seiten switchen können.

hier ein code beispiel:

var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerText = "bilder";
tr.appendChild(td);
document.getElementById("myTable").appendChild(tr); 

var x = document.getElementById("myTable").rows.length;
  if(x > 4){
      var button = document.createElement("button");
   document.getElementById("demo").appendChild(button);
    button.innerText = "page2";
}

Zitat von jonas3344

Und du startest mit?

Code

node index.js

Wie sieht denn die index.js aus? Du musst ja alle Routes in dieser Datei haben.

app.post('/upload', async (req, res) => {
  try {
    if (!req.files) {
      res.send({
        status: false,
        message: 'No file uploaded'
      });
    } else {
      // Use the name of the input field (i.e. "avatar") to retrieve the uploaded file
      const avatar = req.files.input;

      // Use the mv() method to place the file in upload directory (i.e. "uploads")
      avatar.mv('/upload' + avatar.name);

      // send response
      res.send({
        status: true,
        message: 'File is uploaded',
        data: {
          name: avatar.name,
          mimetype: avatar.mimetype,
          size: avatar.size
        }
      });
    }
  } catch (err) {
    res.status(500).send(err);
  }

das ist die post funktion in node

Zitat von jonas3344

Und du startest mit?

Code

node index.js

Wie sieht denn die index.js aus? Du musst ja alle Routes in dieser Datei haben.

ja richtig. so startet alles.

const express = require('express');

const app = express();

app.use(express.static('dist')); 

app.get('/', (req, res) => {
  res.render('index', {
  });
});

const PORT = process.env.PORT || 8080;

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

app.post habe ich mal rausgenommen

Zitat von jonas3344

Das ist ein 404, d.h. er findet /upload nicht.

Hast du Deine node-App gestartet?

Wo läuft den das Frontend? Auch über node? Oder über Apache?

das Ganze wird über localhost:8080 gestartet. Die Seite wird auch angezeigt.

so sieht meine ordnerstruktur aus. Es läuft alles mit node

html-seminar.de/woltlab/attachment/2551/

Zitat von Sempervivum

node.js ist serverseitig. Und um die Bilder hochladen und speichern zu können, brauchst Du ein serverseitiges Skript. Wenn Du bei node.js bleiben möchtest, musst Du warten bis sich jemand meldet, der sich damit auskennt. Alternativ ein PHP-Skript verwenden, um die Datei zu speichern, das wären nur wenige Zeilen und ich könnte dir ein Beispiel geben.

php ist leider nicht erlaubt. wäre sonst auch damit weitergekommen, da so viele beispiele existieren.

leider muss ich das speichern entweder mit node oder als normales html code hinbekommen. node war auch eine gute alternative, nur leider werde ich beim POST immer redirected. da finde ich auch keine lösung....

ich habe jetzt mal die zeile mit

const fd= new FormData();
fd.append(file, file);

fetch('/upload', {
    method: 'POST',
    body: fd
})

geändert.

Als meldung kam das zurück. bei fetch('/upload...) gibt es ein problem

html-seminar.de/woltlab/attachment/2549/

bei

ja es ist nodejs.

ehrlich gesagt, weiß ich nicht inwiefern sich das ganze unterscheidet.

Ich würde gerne im cientseitigen mit fetch die bilder im /upload speichern. das wars auch schon.

nur habe ich im internet schon so viele beiträge gelesen, dass ich nur noch durcheinander bin.

es gibt varianten mit multer, formidable usw.

Zitat von Sempervivum

Sieh dir mal dies an:

Code

// add file to FormData object
const fd = new FormData();
fd.append('input', file);

In deinem serverseitigen Skript taucht die hochgeladene Datei als $_POST['input'] auf. Überprüfe das bzw. poste das serverseitige Skript.

so sieht es aus momentan.

app.post('/upload', async (req, res) => {
  try {
    if (!req.files) {
      res.send({
        status: false,
        message: 'No file uploaded'
      });
    } else {
      
      const avatar = req.files.input;

      
      avatar.mv('/upload' + avatar.name);

     
      res.send({
        status: true,
        message: 'File is uploaded',
        data: {
          name: avatar.name,
          mimetype: avatar.mimetype,
          size: avatar.size
        }
      });
    }
  } catch (err) {
    res.status(500).send(err);
  }
});

Zitat von Sempervivum

Das sieht mir nicht nach Text aus. Hast Du das Javascript genau so geändert wie in #3?

Und hattest Du auch eine Datei ausgewählt?

<script>
    const input = document.getElementById('input');

// add event listener
input.addEventListener('change', () => {
    uploadFile(input.files[0]);
});

const uploadFile = (file) => {

// add file to FormData object
const fd = new FormData();
fd.append('input', file);

// send `POST` request
fetch('/upload', {
    method: 'POST',
    body: fd
})
.then(res => res.json())
.then(txt => console.log(txt))
.catch(err => console.error(err));
}

ja genau. so sieht es momentan aus. sobald ich das bild auswähle, sollte es im /upload gespeichert werden. tut es leider nicht

Zitat von Sempervivum

Sie wird in die Console geschrieben.

html-seminar.de/woltlab/attachment/2548/

so sieht die fehlermeldung aus

Zitat von Sempervivum

Dass Du in den then-Fall statt catch herein kommst ist schon mal ein gutes Zeichen, dann dürfte das Hochladen erfolgreich gewesen sein.

Dein Skript erwartet eine Antwort vom Server im JSON-Format, da Du sie hier entspr. dekodierst:

.then(res => res.json())

Vermutlich ist die Antwort etwas anderes, z. B. HTML. Du kannst dir die Antwort ansehen, indem Du statt dessen den Textmodus verwendest:

Wo kann ich denn die txt im inspector einsehen?

Zitat von Sempervivum

Dass Du in den then-Fall statt catch herein kommst ist schon mal ein gutes Zeichen, dann dürfte das Hochladen erfolgreich gewesen sein.

Dein Skript erwartet eine Antwort vom Server im JSON-Format, da Du sie hier entspr. dekodierst:

.then(res => res.json())

Vermutlich ist die Antwort etwas anderes, z. B. HTML. Du kannst dir die Antwort ansehen, indem Du statt dessen den Textmodus verwendest:

Code

// send `POST` request
fetch('/upload', {            //Verzeichnis wo das bild gespeichert werden soll
    method: 'POST',
    body: fd
})
.then(res => res.text())
.then(txt => console.log(txt))
.catch(err => console.error(err));
}

Vielen Dank.

Ich werde es mal versuchen.

Ich habe nämlich auch eine serverseitige Lösung mit express. Es funktioniert so auch nicht. Ich weiß nicht wo da mein fehler ist

Ich habe es nach diesem Tutorial versucht: https://attacomsian.com/blog/u…ng-files-using-fetch-api#

Hallo.

Ich versuche gerade ein Bild auf einen server zu senden. Jedoch funktioniert das noch nicht so genau

Hier ist mein code:

<script>
    const input = document.getElementById('input');        //ID des input-types. Hier wähle ich das Bild, welches ich zum server senden möchte


input.addEventListener('change', () => {
    uploadFile(input.files[0]);
});

const uploadFile = (file) => {


const fd = new FormData();
fd.append('input', file);

// send `POST` request
fetch('/upload', {            //Verzeichnis wo das bild gespeichert werden soll
    method: 'POST',
    body: fd
})
.then(res => res.json())
.then(json => console.log(json))
.catch(err => console.error(err));
}
</script>

Bei dem unteren Quellcode kriege ich immer diese Fehlermeldung angezeigt. Laut Google ist es ein Content-Type Fehler, jedoch dachte ich das Fetch es automatisch setzt.

.then(json => console.log(json))     //SyntaxError: Unexpected token < in JSON at position 0 javascript

Hat jemand eine Idee??

Zitat von Sempervivum

Kam mir gleich sehr bekannt vor, dieser Code

Leider hast Du meinen Vorschlag aus dem vorigen Thread nicht übernommen sondern bist immer noch bei diesem verbauten Code

Und aus dem Code in diesem Thread kann ich leider nicht erkennen, wodurch die Weiterleitung zu Stande kommt. Extra getestet: <button type="button" ... bewirkt bei mir keinen Submit.

ja, da ich mit meinem code bei dem vorherigen problem weiter kam, hatte ich es so belassen.

den button type hatte ich auch mal als input type submit drin stehen, und wurde auch weiterverlinkt.

ich denke das es mit der funktion loadfile wenig zu tun hat. eher mit dem verzeichnis in der form action selbst.

ich habe dir mal den input type hinzugefügt.

<form action="/uploadverzeichnis" method="POST" enctype="multipart/form-data" ;>
        <input type="file" accept="image/*, .geojson" onchange="loadFile(event)" name="myImage">
            <input type="submit" value ="Upload Button" id="i"></form><br>

Zitat von Sempervivum

Du darfst das Attribut onchange nicht mehrfach hinzu fügen. Mein Editor reklamiert das als Fehler und ein Test ergibt, dass nur das erste feuert (im Opera, anders als ich erwartet hätte).

Da Du keinen Submit-Button hast, muss die Weiterleitung irgend wo in deinem Javascript erfolgen. Poste das doch mal.

Hallo,

Die erste onchange-Methode loadfile ladet das Bild in einem Container. Da warst du mir auch sehr behilflich

var loadFile = function(event) {
    var reader = new FileReader();
    var output2 = document.getElementById('myImageContainer');
    var myEditor = document.getElementById('editor-container');
    var html = myEditor.children[0].innerHTML;
    reader.onload = function(){
    output2.src = reader.result;
    output2.style.height = "auto";
    output2.style.width = "auto";
    
    document.getElementById('i').onclick = () => {
      myFunction();
    }
    function myFunction(){
        myText();
        myDate();
      output2.innerHTML += '<img src="' + reader.result + '">';
      this.element=document.querySelector('break');
    };
    function myText(){
      output2.innerHTML += html;
    };
    function myDate(){
        var date = new Date();
      var datenow = date.toString();
    
      output2.innerHTML += datenow;
    };
    };
    reader.readAsDataURL(event.target.files[0]);
    };

In Multer habe ich noch diesen Code hier

app.post('/uploadverzeichnis', (req, res) => {
  upload(req, res, (err) => {
    if (err) {
      res.render('index', {
        msg: err
      });
    } else {
      if (req.file === undefined) {
        res.render('index', {
          msg: 'Error: No File Selected'
        });
      } else {
        res.render('index', {
          msg: 'File Uploaded!',
          file: `uploadverzeichnis/${req.file.filename}` 
        });
      }
    }
  });
});

Hallo Zusammen,

ich bräuchte mal euren Rat.

Ich habe eine Form und es ist so, dass ich auch einen Server habe wo ich ausgewählte Bilder dort speichern/hochladen kann.

Leider habe ich das Problem, dass ich jedesmal auf das Verzeichnis verlinkt werde wenn ich ein bild hochlade. Also werde ich direkt auf http://lochalhost:3000/uploadverzeichnis/irgendwas.png verlinkt. Ich würde dies gerne verhindern und die bilder nur an den server schicken.

onsubmit=return false behebt nicht das Problem. Es muss ja bestätigt werden, damit ich das bild hochladen kann.

e.preventDefault() löst es auch nicht.

ich zeige euch mal, wie die form aussieht.

<form action="/uploadverzeichnis" method="POST" enctype="multipart/form-data" ;>
        <input type="file" accept="image/*, .geojson" onchange="loadFile(event)" onchange="onFileSelected(event)" name="myImage">
            <button type="button" id="i">Upload das Ding</button></form><br>

die serverseitige umsetzung erfolgt mit multer.

Zitat von Sempervivum

Das macht das Ganze natürlich viel einfacher, Du brauchst dann kein Formular und kein Ajax. Ich habe das Ganze mal etwas gestrafft:

Code

    <script>
        const output = document.getElementById('output');
        const output2 = document.getElementById('myImage');
        const fileInput = document.querySelector('input[name="file"]');
        const showBtn = document.querySelector('#i');
        const reader = new FileReader();
        fileInput.addEventListener('change', (event) => {
            reader.onload = () => {
                output.src = reader.result;
                output.style.height = "100px";
                output.style.width = "auto";
            };
            reader.readAsDataURL(event.target.files[0]);
        });
        showBtn.addEventListener('click', (event) => {
            output2.innerHTML += '<img src="' + reader.result + '">';
        });
    </script>

Alles anzeigen

So wird das Bild zum Container jeweils hinzugefügt weil Du beim innerHTML += verwendest. Wenn Du dagegen immer nur das letzte Bild anzeigen willst, kannst Du es auch so machen, wie von nextuser empfohlen.

Zitat von nextuser

Du kannst den img-Tag auch einfach im div belassen und mit JS dann nur die Quelle (Bildelement.src = "...") verändern, anstatt innerHTML.

Hallo. Vielen Dank für die Tipps. Ich war die letzten Tage arbeiten und hatte keine Zeit euch zu antworten.

Leider klappen beide Varianten nicht. Ich habe den Code übernommen und das Bild wird trotzdem nur eine Sekunde angezeigt, verschwindet im Anschluss wieder.

Ich weiß nicht. Ich bin einfach deprimiert momentan. Nichts will klappen.

Ich glaube, die Bilder als Preview im Modal anzeigen zu lassen und die Originalgröße im Div anzeigen zu lassen, ist keine gute Idee.

Habt ihr andere Tipps, wie ich ausgewählte Bilder in einem Div anzeigen kann?

Zitat von Sempervivum

Mal sehen, vielleicht verstehe ich da jetzt etwas falsch: Weil Du bei dem Button schreibst "Button zum Hochladen" und weil ich den Fileinput bisher nur zum Hochladen von Dateien verwendet habe, bin ich davon ausgegangen, dass Du die Bilder jeweils auf den Server hochladen willst. Trifft das überhaupt zu oder willst Du die Bilder nur in dem div anzeigen?

genau. ich will das bild nur im div anzeigen lassen.

Zitat von Sempervivum

Ich denke, dann ist die Sache klar: Dein input#i hat den Typ "submit", das bewirkt, dass beim Klicken das Formular abgeschickt wird. D. h. die Seite wird neu geladen, da Du keine Action angegeben hast. Da Du das Bild ja hochladen willst, kannst Du auf das Abschicken auch nicht verzichten. Ich sehe da zwei Möglichkeiten:

1. Du akzeptierst, dass das Bild nur nach dem Auswählen der Datei sichtbar ist und nach dem Abschicken des Formulars und Hochladen wieder verschwindet.

2. Du lädst das Bild mit Ajax hoch, dann wird die Seite nicht neu geladen und die Vorschau verschwindet nicht.

Oder, möglicher Weise, wenn du nach dem Hochladen die URL auf dem Server kennst:

3. Diese URL als src in das img-Tag eintragen, dann würde das Bild ebenfalls angezeigt werden.

Leider darf ich Ajax nicht benutzen.

zu 3.

(output2.innerHTML += '<img src="' + reader.result + '">';)

hier versuche ich ja die src als img- tag einzutragen und ich denke, dass es auch so richtig ist (da es dynmaisch ausgewählt wird). gibt es denn irgendwelche alternativen? Ich möchte nämlich nicht, dass es <img src ="bild.png" > heißen soll. das bild soll ja vom benutzer ausgewählt werden.

zu 1.

das habe ich gar nicht so gesehen. jetzt ergibt es auch ein sinn, warum es nach ein paar sekunden verschwindet.