Pagina laadt opnieuw bij uploaden foto
jovank vank
02/11/2014 11:30:52Ik heb een form waarin via jquery upload een foto wordt geselecteerd, geupload, verwerkt in php en vervolgens weer wordt geplaatst in het form.
Het werkt allemaal prima, maar het vervelende is, vóórdat het selectiescherm verschijnt, het scherm naar de bovenkant van de pagina schuift. Omdat de button en de preview onderaan de pagina staan, verdwijnen zij van het scherm. Dat is heel irritant.Wat ik ook probeer, het werkt niet. Maar ik ben dan ook nog geen expert in jquery.
Weet iemand hoe ik de pagina fixeer???
Dit is de code van het form:
En dit van het script:
Het werkt allemaal prima, maar het vervelende is, vóórdat het selectiescherm verschijnt, het scherm naar de bovenkant van de pagina schuift. Omdat de button en de preview onderaan de pagina staan, verdwijnen zij van het scherm. Dat is heel irritant.Wat ik ook probeer, het werkt niet. Maar ik ben dan ook nog geen expert in jquery.
Weet iemand hoe ik de pagina fixeer???
Dit is de code van het form:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<td class="celkleurfoto" align="center" valign="top" height="120px">
<form id="imageform" method="post" enctype="multipart/form-data" action="../proc/ajaximage.php">
<label class="inputlabel"><input type="file" name="photoimg" id="photoimg" />Bestand kiezen</label>
</form>
<div id='preview'> <img src="../pics/toestel.png" height="70" width="95"> </div>
</td>
<form id="imageform" method="post" enctype="multipart/form-data" action="../proc/ajaximage.php">
<label class="inputlabel"><input type="file" name="photoimg" id="photoimg" />Bestand kiezen</label>
</form>
<div id='preview'> <img src="../pics/toestel.png" height="70" width="95"> </div>
</td>
En dit van het script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="../pics/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({target: '#preview'}).submit();
});
});
</script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="../pics/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({target: '#preview'}).submit();
});
});
</script>
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 02/11/2014 11:57:41 door - Ariën -
Er zijn nog geen reacties op dit bericht.