Javascript Vorschau mit Bild

[93cracker93]

Also ich möchte ein Vorschau+Bildvorschau haben.
Durch das erste thumbnail2 wird wenn ein Benutzer ein Bild auswählt automatisch eine Vorschau erststellt. Bloß das Problem ist, dass im Formular noch mehr sachen stehen sollen später und wenn ich dann auf den Button Vorschau drücke,dann lädt die Seite neu und die Vorschau ist wieder weg. Deswegen habe ich die img.src in den Storage geschrieben, sobald ein bild ausgewählt wird. Und wenn man auf Submit klickt soll sie aus dem Storage wieder herausgelesen werden und als thumbnail3 oben angezeigt werden. Dies klappt aber nicht, Es wird mir erst gar kein Bild nach Buttondrücken ausgegeben. Und komme nicht weiter, vllt entdeckt ihr ja einen Fehler den ich gemacht habe.

<form id="bbcode2" method="post" enctype="multipart/form-data" >  
    <div id="thumbnail3"></div>  
    <input type="file" name="hauptbild" id="hauptbild" onChange="fileThumbnail2(this.files);" accept="image/*" multiple /><div id="thumbnail2"></div>  
  <input type="submit" name="Vorschau" value="Vorschau" onclick="fileThumbnail3(this.files);" />  
</form>

<script type="text/javascript">  
  
window.URL = window.URL || window.webkitURL;  
function fileThumbnail2(files)  
{  
  
  var thumb = document.getElementById("thumbnail2");  
  
  thumb.innerHTML = "";  
  
  if(!files)  
    return;  
  
  for(var i = 0; i < files.length; i++)  
  {  
    var file = files[i];  
  
    if(!file.type.match(/image.*/))  
      continue;  
  
    var img = document.createElement("img");  
  
         img.src = window.URL.createObjectURL(file);  
         localStorage.setItem("bla", img.src);  
  
    img.width = 620;  
  
    img.onload = function(e) {  
      window.URL.revokeObjectURL(this.src);  
    };  
  
  
                thumb.appendChild(img);  
  }  
}  
  
window.URL = window.URL || window.webkitURL;  
  
function fileThumbnail3(files)  
{  
  
  var thumb = document.getElementById("thumbnail3");  
  
  thumb.innerHTML = "";  
  
  if(!files)  
    return;  
  
  for(var i = 0; i < files.length; i++)  
  {  
    var file = files[i];  
  
    if(!file.type.match(/image.*/))  
      continue;  
  
    var img = document.createElement("img");  
  
   img.src = localStorage.getItem("bla");  
  
  
    img.width = 620;  
  
    img.onload = function(e) {  
      window.URL.revokeObjectURL(this.src);  
    };  
  
  
                thumb.appendChild(img);  
  }  
}

Ich bitte um Hilfe, Grüße