2
現在，我正在爲我的學習開發多媒體項目。任務是創建一個衆籌平臺。我的問題是「創建項目」頁面上的本地預覽圖像。我用了論壇搜索和跨越這來了：使用JavaScript和HTML5的PreviewImage
http://www.xul.fr/en/html5/filereader.php
我複製的代碼，並把它放在我的HTML/JS文件是這樣的：
這是我的HTML代碼至今：
<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>
而我的JavaScript代碼：
<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>
我的CSS-代碼：
.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;
}
就像我說的，我複製代碼直接從我的文章的開頭的鏈接，但它不會工作...我不明白它。是否有可能，這必須在真正的服務器上運行，因爲現在，我正在使用XAMPP測試我的所有工作。
你會得到什麼錯誤？，你在使用什麼瀏覽器？另請參閱https://developer.mozilla.org/en-US/docs/DOM/FileReader#Example – Musa
問題是readfile未在您的JavaScript代碼中定義。 –
我沒有得到任何錯誤，我看到按鈕，我可以選擇一個文件，但圖像不會出現。我測試的瀏覽器是Chrome，Firefox和Safari的最新版本。 – Nik