views:

288

answers:

1

Hello! I have this signature generator script. And when the images you upload does not meet the requirements the user recieves an error message. The problem here is that the error message shows up in the uploading pop-up, is there any way to show the error messages in the original page instead?

Here is my signature generator script. http://www.anitard.org/siggen/siggen_stripes/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Signature Generator</title>
</head>
<body>
      <div style="float:left;  width: 280px; margin-right: 3px;">
<form name="frm" method="post">


<p></p>
<p>Enter Text: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input name="user" type="text" size="20" class="textbox">
<br /><br />
<p> Color: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
  <select name="color2">
    <option value="color_standard">Standard</option>
        <option value="color_blue">Blue</option>
            <option value="color_lightblue">Light blue</option>
                <option value="color_red">Red</option>
                    <option value="color_yellow">Yellow</option>
                        <option value="color_green">Green</option>
                           <option value="color_purple">Purple</option>
    </select>
    <br /><br />



<i><font size="1" face="verdana">Choose if your going to use one of our "anime" pictures or upload your own image.</font></i>

<br />



<script type="text/javascript">

function annClick() 
{
document.getElementById('butta').disabled = true;
document.getElementById('strup').disabled = true;
document.getElementById('namez').disabled = false;
}


function ownClick() 
{
document.getElementById('butta').disabled = false;
document.getElementById('strup').disabled = false;
document.getElementById('namez').disabled = true;
}

</script>


<input type="radio" name="checktype" id="ann" onclick="javascript:annClick();" value="1"> Anime<br>
<input type="radio" name="checktype" id="own" onclick="javascript:ownClick();" value="2"> Upload<br>

<br />

    &nbsp;<u>Anime</u><br /> 

<select name="anime" id="namez" size="9" disabled="true" onclick="document.getElementById( 'imgUpload' ).src=this.value+'.png';" />
        <option value="hack_twillight">.hack//Legend of the Twilight Bracelet</option>
     <option value="hack_roots">.hack//Roots</option>
                <option value="hack_sign">.hack//SIGN</option>
                <option value="07_ghost">07-Ghost</option>
                <option value="12_kingdoms">12 kokuki ( 12 kingdoms )</option>
                <option value="afro_samurai">Afro Samurai</option>
                <option value="ah_my_goddess">Ah! My Goddess</option>
                <option value="ai_yori_aoshi">Ai yori Aoshi</option>
                <option value="ai_yori_aoshi_enishi">Ai yori Aoshi ~enishi~</option>
                <option value="air_gear">Air Gear </option>
                <option value="air_tv">Air TV</option>
                <option value="aishiteru_ze_baby">Aishiteru ze Baby</option>
                <option value="akagi">Akagi</option>
                <option value="akikan">Akikan!</option>
                <option value="allison_to_lillia">Allison to Lillia</option>
                <option value="amaenaideyo">Amaenaideyo</option>
                <option value="amaenaideyo_katsu">Amaenaideyo Katsu</option>
                <option value="amatsuki">Amatsuki</option>                
                <option value="angel_heart">Angel heart</option>
                <option value="angelic_layer">Angelic layer</option>
                <option value="antique_bakery">Antique bakery</option>
                <option value="aria_the_animation">ARIA The animation</option>
                <option value="aria_the_natural">ARIA The natural</option>
                <option value="aria_the_origination">ARIA The origination</option>
                <option value="asu_no_yoichi">Asu no yoichi</option>
                <option value="ayakashi">Ayakashi</option>
                <option value="azumanga_daioh">Azumanga daioh</option>     
                <option value="baccano">Baccano</option>
                <option value="bakuretsu_tenshi">Bakuretsu Tenshi</option>
                <option value="bamboo_blade">Bamboo blade</option>
                <option value="basilisk">Basilisk</option>
                <option value="berserk">Berserk</option>
                <option value="basquash">Basquash</option>
                <option value="beck">Beck</option>
                <option value="black_cat">Black Cat</option>
                <option value="black_lagoon">Black Lagoon</option>
                <option value="black_lagoon_the_second_barrage">Black Lagoon the second barrage</option>                
                <option value="bleach">Bleach</option>
                <option value="blood">Blood+</option>
                <option value="bokura_ga_ita">Bokura ga ita</option>
                <option value="bokura_no">Bokura no</option>
                <option value="bokusatsu_tenshi_dokuro_chan">Bokusatsu tenshi dokuro chan</option>
                <option value="bokusatsu_tenshi_dokuro_chan_second.png">Bokusatsu tenshi dokuro chan 2</option>
                <option value="bounen_no_xamd">Bounen no xamd</option>
                <option value="busou_renkin">Busou renkin</option>
                <option value="canvas2">Canvas 2</option>
                <option value="capeta">Capeta</option>
                <option value="card_captor_sakura">Card captor sakura</option>
                <option value="casshern_sins">Casshern sins</option>
                <option value="chaos_head">Chaos head</option>
                <option value="chis_sweet_home">Chi's sweet home</option>
                <option value="chobits">Chobits</option>
                <option value="chocotto_sister">Choccotto_sister</option>
                <option value="chrno_crusade">Chrno crusade</option>
                <option value="clannad">Clannad</option>                
                <option value="claymore">Claymore</option>
                <option value="cluster_edge">Cluster edge</option>
                <option value="code_geass">Code geass</option>
                <option value="code_geass_r2">Code geass R2</option>
                <option value="cosplay_complex">Cosplay complex</option>
                <option value="cowbow_bebop">Cowboy bebop</option>
                <option value="crayon_shin_chan">Crayon shin chan</option>
                <option value="cross_game">Cross game</option>
                <option value="d_gray_man">D.Gray Man</option>
                <option value="dn_angel">DN Angel</option>
                <option value="da_capo">Da capo</option>                
                <option value="da_capo_ii">Da capo II</option>
                <option value="darker_than_black">Darker than black</option>
                <option value="dears">DearS</option>
                <option value="death_note">Death note</option>
                <option value="dennou_coil">Dennou coil</option>
                <option value="desert_punk">Desert punk</option>
                <option value="devil_may_cry">Devil may cry</option>
                <option value="doujin_work">Doujin work</option>
                <option value="dragon_ball">Dragon ball</option>  
                <option value="dragon_ball_gt">Dragon ball GT</option>                
                <option value="dragon_ball_z">Dragon ball Z</option>
                <option value="dragonaut_the_resonance">Dragonaut -the resonance-</option>
                <option value="fate_stay_night">Fate/stay night</option>
                <option value="final_approach">Final approach</option>
                <option value="flame_of_recca">Flame of recca</option>
                <option value="flcl">FLCL</option>
                <option value="fruits_basket">Fruits basket</option>
                <option value="full_metal_panic">Full metal panic</option>
                <option value="full_metal_panic_second_raid">Full metal panic secondn raid</option>  
                <option value="full_metal_panic_fumoffu">Full metal panic fumoffu</option>  
                <option value="full_moon_wo_sagashite">Full moon wo sagashite</option>                
                <option value="fullmetal_alchemist">Fullmetal alchemist</option>
                <option value="fullmetal_alchemist_brotherhood">Fullmetal alchemist brotherhood</option>
                <option value="fushigi_yuugi">Fushigi yuugi</option>
                <option value="h20">H2O ~footprints in the sand~</option>
                <option value="haibane_renmei">Haibane renmei</option>
                <option value="hajime_no_ippo">Hajime no ippo</option>
                <option value="hana_yori_dango">Hana yori dango</option>
                <option value="hanasakeru_seishonen">Hanasakeru seishonen</option>
                <option value="hanaukyo_maids">Hanaukyo maids</option>  
                <option value="hanaukyo_maids_le_verite">Hanaukyo maids le verite</option>  
                <option value="hanbun_no_tsukai">Hanbun no tsukai</option>  
                <option value="hand_maid_may">Hand maid may</option>                
                <option value="happiness">Happiness</option>
                <option value="happy_lesson">Happy lesson</option>
                <option value="hatsukoi_limited">Hatsukoi limited</option>
                <option value="hayate_no_gotoku">Hayate no gotoku</option>
                <option value="hayate_no_gotoky_2">Hayate no gotoku 2</option>
                <option value="he_is_my_master">He is my master</option>
                <option value="hellsing">Hellsing</option>
                <option value="heroic_age">Heroic Age</option>
                <option value="hetalia_axis_powers">Hetalia axis powers</option>  
                <option value="hidamari_sketch">Hidamari sketch</option>  
                <option value="hidamari_sketch_x365">Hidamari sketch x365</option>  
                <option value="high_school_girls">High school girls ( Girls high )</option>  
                <option value="higurashi_no_naku_koro_ni">Higurashi no naku koro ni</option>  
                <option value="higurashi_no_naku_koro_ni_kai">Higurashi no naku koro ni kai</option>
                <option value="higurashi_no_naku_koro_ni_rei">Higurashi no naku koro ni rei</option>
                <option value="hikaru_no_go">Hikaru no go</option>
                <option value="himawari">Himawari</option>
                <option value="himitsu_the_revelation">Himitsu the revelation</option>
                <option value="honey_and_clover">Honey and clover</option>
                <option value="honey_and_clover2">Honey and clover 2</option>
                <option value="hunter_x_hunter">Hunter x hunter</option>
                <option value="hyakko">Hyakko</option>  
                <option value="k_on">K-on</option>  
                <option value="kaiba">Kaiba</option>  
                <option value="kaleido_star">Kaleido star</option>                
                <option value="kamen_no_maid_guy">Kamen no maid guy</option>
                <option value="kamisama_kazoku">Kamisama kazoku</option>
                <option value="kannagi">Kannagi</option>
                <option value="kanokon">Kanokon</option>
                <option value="kanon">Kanon</option>
                <option value="karin">Karin</option>
                <option value="kasimasi">Kasimasi</option>
                <option value="katekyo_hitman_reborn">Katekyo hitman reborn</option>
                <option value="kaze_no_stigma">Kaze no stigma</option>  
                <option value="kekkaishi">Kekkaishi</option>  
                <option value="kemono_no_souja_erin">Kemono no souja erin</option>  
                <option value="kenichi">Kenichi</option>  
                <option value="kiba">Kiba</option>  
                <option value="kiddy_grade">Kiddy grade</option>
                <option value="kimi_ga_nozomu_eien">Kimi ga nozomu eien</option>
                <option value="kimikiss_pure_rouge">Kimikiss pure rouge</option>
                <option value="kirarin_revolution">Kirarin revolution</option>
                <option value="kodomo_no_jikan">Kodomo no jikan</option>
                <option value="koharu_biyori">Koharu biyori</option>
                <option value="koihime_musou">Koihime Musou</option>
                <option value="kurenai">Kurenai</option>  
                <option value="kurogane_no_linebarrel">Kurogane no linebarell</option>  
                <option value="kurokami">Kurokami</option>  
                <option value="kuroshitsuji">Kuroshitsuji</option>                
                <option value="kyo_kara_maoh">Kyo kara maoh</option>
                <option value="kurozuka">Kurozuka</option>
                <option value="kyouran_kazoku_nikki">Kyouran kazoku nikki</option>
                <option value="nabari_no_ou">Nabari no ou</option>
                <option value="nana">Nana</option>
                <option value="naruto">Naruto</option>
                <option value="naruto_shippuuden">Naruto shippuuden</option>
                <option value="natsu_no_arashi">Natsu no arashi</option>
                <option value="natsume_yuujinchou">Natsume yuujinchou</option>  
                <option value="zoku_natsume_yuujinchou">Zoku natsume yuuijinchou</option>  
                <option value="negima">Negima!?</option>  
                <option value="neo_angelique_abyss">Neo angelique abyss</option>  
                <option value="neon_genesis_evangelion">Neon genesis evangelion</option>  

                <option value="nhk_ni_youkoso">Nhk ni youkoso</option>  
                <option value="night_head_genesis">Night head genesis</option>  
                <option value="ninja_scroll">Ninja scroll</option>  
                <option value="nodame_cantabile">Nodame cantabile</option>
                <option value="nodame_cantabile_paris">Nodame cantabile paris</option>
                <option value="noein">Noein</option>
                <option value="noir">Noir</option>
                <option value="queens_blade">Queens blade</option>
                <option value="ragnarok">Ragnarok</option>
                <option value="rahxephon">RahXephon</option>
                <option value="ranma">Ranma ½</option>  
                <option value="real_drive">RD sennou chosashitsu</option>  
                <option value="read_or_die">Read or die</option>  
                <option value="rec">REC</option>                
                <option value="rental_magica">Rental magica</option>
                <option value="ristorante_paradiso">Ristorante paradiso</option>
                <option value="rizelmine">Rizelmine</option>
                <option value="romeo_x_juliet">Romeo x juliet</option>
                <option value="rosario_to_vampire">Rosario to vampire</option>
                <option value="rozen_maiden">Rozen maiden</option>
                <option value="rurouni_kenshin">Rurouni kenshin</option>
                <option value="tactical_roar">Tactical roar</option>
                <option value="tale_of_abyss">Tale of abyss</option>  
                <option value="tales_of_symphonia">Tales of symphonia</option>  
                <option value="tears_to_tiara">Tears to tiara</option>  
                <option value="gurren_lagann">Tengen toppa gurren lagann</option>  
                <option value="tenjou_tenge">Tnjou tenge</option>  
                <option value="tenshi_na_konamaiki">Tenshi na konamaiki</option>  
                <option value="birdy">Tetsuwan birdy decode</option>  
                <option value="tsukiyomi_moon_phase">Tsukiyomi moon phase</option>  
                <option value="index">To aru majutsu no index</option>
                <option value="to_love_ru">To love ru</option>
                <option value="today_in_class_5_2">Today in class 5-2</option>
                <option value="toshokan_sensou">Toshokan sensou</option>
                <option value="tokyo_mew_mew">Tokyo mew mew</option>
                <option value="toradora">Toradora</option>
                <option value="touch">Touch</option>
                <option value="trigun">Trigun</option>  
                <option value="trinity_blood">Trinity blood</option>  
                <option value="true_tears">True tears</option>  
                <option value="tsubasa_chronicles">Tsubasa chronicles</option>                
                <option value="utawarerumono">Utawarerumono</option>
    </select>

<br />
 <input name="animeinput" type="hidden" class="textbox" id="animeinput" size="20">
 <br /><br />

   <input type="submit" class="button" value="Create">
   <br />
   <br />
</p>

</form>
<table width="364" height="112" border="0" cellpadding="3">
<tr>
<td width="350">

<?php




              if (isset($_REQUEST['anime']) && !empty($_REQUEST['anime'])) {



echo "<a href=\"download.php?file=sig.php?user=".$_REQUEST['user']."&anime=".$_REQUEST['anime']."&color2=".$_REQUEST['color2']."\"><img type=\"image\" width=\"350\" height=\"100\" border=\"0\" src=\"sig.php?user=".$_REQUEST['user']."&anime=".$_REQUEST['anime']."&color2=".$_REQUEST['color2']."\" /></a>";



            } elseif (isset($_REQUEST['animeinput']) && !empty($_REQUEST['animeinput'])) {

echo "<a href=\"sig.php?user=".$_REQUEST['user']."&anime=".substr($_REQUEST['animeinput'],0,32)."&color2=".$_REQUEST['color2']."\"><img type=\"image\" width=\"350\" height=\"100\" border=\"0\" src=\"sig.php?user=".$_REQUEST['user']."&anime=".substr($_REQUEST['animeinput'],0,32)."&color2=".$_REQUEST['color2']."\" /></a>";




            }







?>
</td>
</tr>
</table>

</div>






<div style="float:left;">


<script type="text/javascript">



// description : upload the image to the server
// notes : 1. open a new window
// 2. submit the form to it
function UploadImage()
{
window.open("","upload_image");
document.getElementById( 'frmUpload' ).target="upload_image";
document.getElementById( 'frmUpload' ).submit();
}

// description : set the src of the image to the uploaded one
function SetImageFile( pImgSrc )
{
document.getElementById( 'imgUpload' ).src=pImgSrc;

}


function setInputFile( pSRC )
{
document.frm.animeinput.value=pSRC;

}

</script>


<?php
if( !isset($_REQUEST['strAction']) || $_REQUEST['strAction'] == "" )
{
?>
<form name="frmUpload" id="frmUpload" enctype="multipart/form-data" action="siggen_stripes.php?strAction=upload" method="POST">

<input name="strUpload" type="file" value="Välj bild" id="strup" disabled="true"  /><input type="button" onclick="javascript:UploadImage();" disabled="true"  value="Upload" id="butta" />
<br />
<font size="1" face="verdana">
Rules for uploading. <br />
</font>
<font size="1" color="red" face="verdana">
*350pixels width and 100pixels height.<br />
*Only the filetype .png<br />
*No images over 1mb.
</font>
<br />
<br />
<table>
<tr>
<td>
<em><font size="1" face="verdana">Preview of your picture/anime picture </font></em><br />
</td>
</tr>
</table>

<table width="270" height="67" style="border:1px solid;">
  <tr>
<td width="270" height="67">
<img src="precontain.png" name="imgUpload" width="270" height="67" border="0" id="imgUpload">
</td>
</tr>
</table>
</form>
<?php
}

// case : upload the file
else
{





$allowed_filetypes = array('.png','.PNG');

$filename = $_FILES['strUpload']['name']; 

$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); 

if(in_array($ext,$allowed_filetypes)) {




                               list($width, $height, $type, $attr) = getimagesize($_FILES['strUpload']['tmp_name']);

                           if ($width > 350 || $height > 100) {
                           echo "That file dimensions are not allowed. Only 350x100 is allowed";
                           exit();
                          } 

if ($_FILES['strUpload']['size'] > 1097152 )
{
echo "ERROR: Large File Size. Only less than 1mb accepted";
exit();
}



$imagename = 'temporary_images/' . uniqid('ff') . ".png";





move_uploaded_file ( $_FILES['strUpload']['tmp_name'], $imagename );

print ( "<script type=\"text/javascript\">" );

if(file_exists($imagename) && $_FILES['strUpload']['name'] != '')
{
print ( "self.opener.SetImageFile(\"" . $imagename . "\");" );
echo "\n";
print ( "self.opener.setInputFile(\"" . $imagename . "\");" );
}
echo "\n";
print ( "window.close();" );
echo "\n";
print ( "</script>" );




                  } else {
                   echo "WRONG FILE TYPE ONLY PNG ALLOWED";
                  }







}
?>
<?php
// Define the folder to clean
// (keep trailing slashes)
$captchaFolder  = 'temporary_images/';

// Filetypes to check (you can also use *.*)
$fileTypes      = '*.png';

// Here you can define after how many
// minutes the files should get deleted
$expire_time    = 1; 

// Find all files of the given file type
foreach (glob($captchaFolder . $fileTypes) as $Filename) {

    // Read file creation time
    $FileCreationTime = filectime($Filename);

    // Calculate file age in seconds
    $FileAge = time() - $FileCreationTime; 

    // Is the file older than the given time span?
    if ($FileAge > ($expire_time * 60)){

        // Now do something with the olders files...

     unlink($Filename);

        // For example deleting files:
        //unlink($Filename);
    }

}
?>
</div>
</body>
</html>

This is what i changed

<form name="frmUpload" id="frmUpload" enctype="multipart/form-data" action="siggen_stripes.php?strAction=upload" method="POST">

<input name="strUpload" type="file" value="Välj bild" id="strup" disabled="true"  /><input type="button" onclick="javascript:UploadImage();" disabled="true"  value="Upload" id="butta" />
<br />
<div id="error"></div>
<br />
<font size="1" face="verdana">
Rules for uploading. <br />
</font>
<font size="1" color="red" face="verdana">
*350pixels width and 100pixels height.<br />
*Only the filetype .png<br />
*No images over 1mb.
</font>
<br />
<br />
<table>
<tr>
<td>
<em><font size="1" face="verdana">Preview of your picture/anime picture </font></em><br />
</td>
</tr>
</table>

<table width="270" height="67" style="border:1px solid;">
  <tr>
<td width="270" height="67">
<img src="precontain.png" name="imgUpload" width="270" height="67" border="0" id="imgUpload">
</td>
</tr>
</table>
</form>
<?php
}

// case : upload the file
else
{





$allowed_filetypes = array('.png','.PNG');

$filename = $_FILES['strUpload']['name']; 

$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); 

if(in_array($ext,$allowed_filetypes)) {




                               list($width, $height, $type, $attr) = getimagesize($_FILES['strUpload']['tmp_name']);

                           if ($width > 350 || $height > 100) {
                           echo "<script>opener.getElementById('error').innerHtml = 'That file dimensions are not allowed. Only 350x100 is allowed'</script>";
                           exit();
                          }
A: 

instead of writing the code directy, you can create a error-div in the opening page (seomthing in the line of:

<form name="frmUpload" ... >
<div id="error"></div>
...

which you can then fill via the popup:

echo "ERROR: Large File Size. Only less than 1mb accepted";

you write:

echo "<script type=\"text/javascript\">self.opener.document.getElementById('error').innerHTML = 'ERROR: Large File Size. Only less than 1mb accepted';window.close();</script>";

(same for the other error messages)

You probably want a window.close(); around there as well if you dont do it already anyways (its a little hard to read)

Niko
Would you mind showing me how to do that in with my code?
sure (updating)
Niko
http://www.anitard.org/siggen/siggen_stripes/It didnt work.Look in my first post to see what i edited.
Do you know why it doesnt work?
my bad, you obviously need a document as well (just adapted the code accordingly)
Niko
I dont understand, could you explain in a little bit more detail what to do?
I updated to code to what you will need. Since you open a popup (new window) you can reference back to the originating window using "opener" (you already do that to update the image (see: print ( "self.opener.SetImageFile(\"" . $imagename . "\");" );). You can use the same technique to modify the content in the parent window. By creating a div with an id (div id="error") you create a container for you error messages.you can change the content there with ELEMENT.innerHTML. To get ELEMENT you can use getElementById. I just found another typo in my code - fixed that.
Niko
Thanks a bunch, this works!