Jimdo-Specials (Tools, Widgets, HTML und CSS)

wie HTML + Javascript

09.06.2023 09:09

edissport
#1

Guten Morgen Zusammen,
ich hoffe ich werde nicht gleich gesteinigt.

Ich möchte auf meiner Seite ein kleines Tool integrieren welches eine Bilddatei überprüft ob die Auflösung für den von mir gewünschten Zweck geht.
Ein lieber Mensch hat mir hier mal kurz was gebastelt was dem was ich möchte sehr nahe kommt.

(Leider darf ich erst nach 5 Beiträgen auf eine externe Seite verweisen )

HTML Code klappt ja!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<html>
<head>
  <title>Bilddatei-Überprüfungstool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
      background-color: #f3f3f3;
    }
 
    h1, h2 {
      color: #333;
    }
 
    form {
      margin-bottom: 20px;
    }
 
    label {
      display: block;
      margin-bottom: 10px;
      color: #666;
    }
 
    #size {
      display: block;
      margin: 0 auto;
    }
 
    button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
 
    button:hover {
      background-color: #45a049;
    }
 
    #preview {
      max-width: 100%;
      max-height: 400px;
      margin: 0 auto;
      border: 1px solid #ddd;
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <h1>Bilddatei-Überprüfungstool</h1>
  <form>
    <label for="file">Bilddatei auswählen:</label>
    <input type="file" id="file" accept="image/*">
    <br>
    <label for="size">Druckgröße:</label>
    <select id="size">
      <option value="small">Klein (Brustlogo)</option>
      <option value="large">Groß (Rückenlogo)</option>
    </select>
    <br>
    <button type="button" onclick="checkImage()">Bild überprüfen</button>
  </form>
 
  <div id="preview"></div>
  <script src="script.js"></script>
</body>
</html>
 
 

Javascript scheitere ich am einbau - da ich nicht weiß wie und wo ich diesen einbauen soll

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
function checkImage() {
  var fileInput = document.getElementById('file');
  var preview = document.getElementById('preview');
  var selectedSize = document.getElementById('size').value;
  
  if (fileInput.files && fileInput.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      var image = new Image();
      image.src = e.target.result;
      
      image.onload = function() {
        var width = this.width;
        var height = this.height;
        
        if (selectedSize === 'small' && (width < 500 || height < 500)) {
          preview.innerHTML = 'Das Bild ist zu klein für ein Brustlogo.';
        } else if (selectedSize === 'large' && (width < 1000 || height < 1000)) {
          preview.innerHTML = 'Das Bild ist zu klein für ein Rückenlogo.';
        } else {
          preview.innerHTML = 'Das Bild ist geeignet.';
        }
        
       // preview.appendChild(image);
      }
    };
    
    reader.readAsDataURL(fileInput.files[0]);
  }
}
 

Kann mir jemand für einen kleinen Dummi dies erklären bzw. helfen?

Dankeschön

Antworten

Beitrag melden

10.06.2023 14:33

edissport
#2

edissport

Kann mir wirklich niemand helfen hier???

Antworten

Beitrag melden

03.07.2023 18:56

az_
#3

az_

Generell musst du Skripte in dem Heftbereich eine Jindo Seite immer einbinden. Das funktioniert ähnlich wie beim HTML mit klammern.
Ein Stylesheet zum Beispiel wird immer mit <style type="text/css"> � </style>

Ein Java Skript wird immer mit folgenden Klammern eingebunden:

mit <script type="text/javascript"> � </script>

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html