PreviewImage using JavaScript and HTML5

Question

Right now, I am working on a Multimedia-Project for my study. The task is to create a crowdfunding-platform. My problem is the local preview image on the "Create a Project"-page. I used the forum search and came across this:

http://www.xul.fr/en/html5/filereader.php

I copied the code and put it in my HTML/JS Files like this:

This is my HTML-Code so far:

<div class="header">
ICH BIN DER HEADER, HIER KOMMT HEAD-KRAM REIN
</div> <!-- HEADER GESCHLOSSEN -->

<!-- -------------------------1------------------------------- -->

<div class="slideshow">

    <div id="titelbild">

        <input type="file" id="getimage">
        <fieldset><legend>Your image here</legend>
        <div id="imgstore"></div>
        </fieldset> 

    </div> <!-- TITELBILD GESCHLOSSEN -->

    <div id="projektinfos">

        <input type="text" id="titel" maxlength="60" value="Titel" onFocus="if(this.value=='Titel') this.value='';" onBlur="if(this.value=='')this.value='Titel';">

        <select id="rewardfarbe">
            <option selected>Kategorie wählen   </option>
            <option>Rot         </option>
            <option>Grün        </option>
            <option>Blau        </option>
        </select>

        <input type="text" class="textbox" maxlength="60" value="Betrag" onFocus="if(this.value=='Betrag') this.value='';" onBlur="if(this.value=='')this.value='Betrag';">
        <input type="text" class="textbox" maxlength="60" value="Ort" onFocus="if(this.value=='Ort') this.value='';" onBlur="if(this.value=='')this.value='Ort';">  


    </div> <!-- PROJEKTINFOS GESCHLOSSEN -->

</div> <!-- SLIDESHOW GESCHLOSSEN -->

<!-- -------------------------2------------------------------- -->

<div id="details">
</div>

<!-- -------------------------3------------------------------- -->

<div class="footer">
</div>

And my JavaScript-Code:

<script>
function imageHandler(e2) 
{ 
  var store = document.getElementById('imgstore');
  store.innerHTML='<img src="' + e2.target.result +'">';
}

function loadimage(e1)
{
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}

window.onload=function()
{
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
  var y = document.getElementById("getimage");
  y.addEventListener('change', loadimage, false);
}
</script>

And my CSS-Code:

.body {

    width: 1280px;
    height: 2000px;
    background-image:url(images/fabric_patterns_2_source_SMALL.jpg); 

} 

/* -------------------------0------------------------------- */

.header {

    margin: auto;
    width: 900px;
    height: 80px;
    background-color:#FFBD91;

}

/* -------------------------1------------------------------- */

.slideshow {

    margin: auto;
    width: 1024px;
    height: 300px;
    background-color: #ACB6FF;

}

#titelbild {

    float: left;
    width: 400px;
    height: 300px;
    background-image:url(images/bildhinzufuegen.gif);

}

#titelbildhinzufuegen {

    width: 400px;
    height: 300px;
    opacity: 0;

}

#projektinfos {

    float: right;
    width: 624px;
    height: 300px;
    background-color:#B6FF98;

}

/* -------------------------2------------------------------- */

#details {

    margin: auto;
    width: 900px;
    height: 1500px;
    background-color: #C0E3FF;

}

#titel {

    font-family: Helvetica,Verdana,Arial,sans-serif;
    font-size: 18px;
    margin-left: 112px;
    margin-top: 20px;
    width: 400px;
    height: 50px;

}

#rewardfarbe {
    width: 200px;
    height: 50px;
    margin-top: 20px;
    margin-left: 312px;

}

.textbox {

    font-family: Helvetica,Verdana,Arial,sans-serif;
    font-size: 18px;
    margin-left: 312px;
    margin-top: 20px;
    width: 200px;
    height: 50px;

}


/* -------------------------3------------------------------- */

.footer {

    margin: auto;
    width: 900px;
    height: 80px;
    background-color: #B0BAFF;

}

Like I said, I copied the Code right from the link at the beginning of my post, but it won't work...I don't understand it. Is it possible, that this has to be running on a real Server, because right now, I'm testing all my work with XAMPP.

What errors do you get?, what browser are you using? Also see https://developer.mozilla.org/en-US/docs/DOM/FileReader#Example — Musa, Oct 19 '12 at 00:28
The problem is that readfile is not defined in your javascript code. — David Moreno García, Oct 19 '12 at 00:33
I get no errors, I see the Button and I can choose a file, but the image won't appear. My Browsers I test with are the latest versions of Chrome, Firefox and Safari. — Nik, Oct 19 '12 at 00:34

score 1 · Accepted Answer · edited May 23 '17 at 12:18

1

Your code is incomplete so it won't work. It's not a jsfiddle problem. You can find good documentation about what you are trying to do in this HTML5rocks page. Actually the code is quite similar.

Also you can take a look at this nice replay in another similar question. It has a working example.

edited May 23 '17 at 12:18

Community

1
1

answered Oct 19 '12 at 00:40

David Moreno García

3,983
5
44
77

Thank you, for your help. I will read through this right now. This stupid Preview Thing is driving me nuts :D – Nik Oct 19 '12 at 00:44
This is exactly what I needed. You made my day! – Nik Oct 19 '12 at 00:50
1

@Nik Nice to hear that ^^ I added another link in my answer. It'll be very useful. – David Moreno García Oct 19 '12 at 00:51
Already readin' it! Thank you a lot! This project is really important behause we get a lot of Credit Points for it. I will mention you in the Source Code :D – Nik Oct 19 '12 at 00:58
Just wanted to let you know, that it works like a charm and - it - is - awesome! :D – Nik Oct 20 '12 at 15:50
It is nice to hear that the links were useful. Good luck with your project ;) – David Moreno García Oct 20 '12 at 17:17

PreviewImage using JavaScript and HTML5

1 Answers1