I have an image upload on my page i am creating and wrote some javascript that does an image preview.....which worked great locally until i uploaded the page to the server.....then realised that IE7, NN and FF won't allow acces to local files to display to the screen
Anywho.....i have written some php to take the uploaded image and store it n a directory on the server......now i want to know how to get javascript or php to display that image to the screen.
My html form....
Code: Select all
<form name="bannerForm" action="banner.php" method="post" enctype="multipart/form-data"><br/>
<textarea name="bannerText" tabindex="1" cols="50" rows="4" onfocus="clearTextarea(this);">Insert your text here..</textarea>
<br/><br/><br/>
Upload an image for your design:
<br>
<input name="upload" type="file" size="20" tabindex="2" />
<br/>
<p>Complete the order form below and press the submit button, then<br/>
we will call you back to confirm the order and complete the design!</p>
Name:
<br/>
<input name="name" tabindex="3" type="text" id="name" size="20" onfocus="clearText(this);" onblur="return testName(this.form);" />
<br/>
Phone Number:
<br/>
<input name="telephone" tabindex="4" type="text" id="phone" size="20" onfocus="clearText(this);" />
<br/>
Banner Size:
<br/>
<select name="bannerSize" id="bannerSize" tabindex="5">
<option selected="selected">Size (depth x length)</option>
<option> </option>
<option>0.6m x 1.2m @ £33</option>
<option>0.6m x 1.5m @ £36</option>
<option>0.6m x 1.8m @ £39</option>
<option>0.6m x 2.1m @ £44</option>
<option>0.6m x 2.4m @ £49 </option>
<option>0.6m x 3.0m @ £58</option>
<option>0.6m x 3.6m @ £68</option>
<option>0.6m x 4.5m @ £93</option>
<option>0.6m x 6.0m @ £103</option>
<option>0.6m x 7.5m @ £123</option>
<option>0.6m x 9.0m @ £143</option>
<option> </option>
<option>0.75m x 1.2m @ £36</option>
<option>0.75m x 1.5m @ £40</option>
<option>0.75m x 1.8m @ £44</option>
<option>0.75m x 2.1m @ £49</option>
<option>0.75m x 2.4m @ £53 </option>
<option>0.75m x 3.0m @ £66</option>
<option>0.75m x 3.6m @ £79</option>
<option>0.75m x 4.5m @ £97</option>
<option>0.75m x 6.0m @ £111</option>
<option>0.75m x 7.5m @ £126</option>
<option>0.75m x 9.0m @ £146</option>
<option> </option>
<option>0.90m x 1.2m @ £39</option>
<option>0.90m x 1.5m @ £45</option>
<option>0.90m x 1.8m @ £50</option>
<option>0.90m x 2.1m @ £54</option>
<option>0.90m x 2.4m @ £58 </option>
<option>0.90m x 3.0m @ £74</option>
<option>0.90m x 3.6m @ £90</option>
<option>0.90m x 4.5m @ £112</option>
<option>0.90m x 6.0m @ £129</option>
<option>0.90m x 7.5m @ £149</option>
<option>0.90m x 9.0m @ £179</option>
<option> </option>
<option>1.05m x 1.2m @ £43</option>
<option>1.05m x 1.5m @ £49</option>
<option>1.05m x 1.8m @ £54</option>
<option>1.05m x 2.1m @ £61</option>
<option>1.05m x 2.4m @ £67 </option>
<option>1.05m x 3.0m @ £75</option>
<option>1.05m x 3.6m @ £95</option>
<option>1.05m x 4.5m @ £120</option>
<option>1.05m x 6.0m @ £141</option>
<option>1.05m x 7.5m @ £166</option>
<option>1.05m x 9.0m @ £198</option>
<option> </option>
<option>1.20m x 1.2m @ £49</option>
<option>1.20m x 1.5m @ £55</option>
<option>1.20m x 1.8m @ £61</option>
<option>1.20m x 2.1m @ £68</option>
<option>1.20m x 2.4m @ £76 </option>
<option>1.20m x 3.0m @ £92</option>
<option>1.20m x 3.6m @ £124</option>
<option>1.20m x 4.5m @ £142</option>
<option>1.20m x 6.0m @ £172</option>
<option>1.20m x 7.5m @ £202</option>
<option>1.20m x 9.0m @ £237</option>
<option> </option>
<option>1.50m x 1.2m @ £53</option>
<option>1.80m x 1.2m @ £59</option>
<option>2.10m x 1.2m @ £66</option>
<option>2.40m x 1.2m @ £71</option>
</select>
<input type="hidden" name="hidden" value="" />
<br/><br/>
<input type="submit" tabindex="6" value="Submit" onclick="return checkSelect(this.form);" onmousedown="return testTel(this.form);" />
<input type="reset" value="Reset" tabindex="7" />
</form>
My php code....
Code: Select all
// Set directory for uploaded files to be stored in and set variables.
$file_dir = $_SERVER['DOCUMENT_ROOT'] . '/terry/uploads/';
$name = $_REQUEST['name'] ;
$phone = $_REQUEST['telephone'] ;
$hidden = $_REQUEST['hidden'] ;
$bannerText = $_REQUEST['bannerText'] ;
// Move uploaded file to the directory specified above.
foreach($_FILES as $file_name => $file_array) {
if (is_uploaded_file($file_array["tmp_name"])) {
move_uploaded_file($file_array["tmp_name"], "$file_dir/".$file_array["name"]) or die ("Couldn't copy");
}
}
// If image file name contains whitespace, replace whitespace with %20 to complete the url string correctly.
$str = $file_array["name"] ;
$search = " ";
$replace = "%20";
$pic = str_replace($search, $replace, $str);
// If image was uploaded create link to image on server / else, alert that no image was submitted.
$img = "";
if ($pic) {
$img = "http://www.thanweb.co.uk/terry/uploads/".$pic ;
}
else {
$img = "No Image was Uploaded!";
}
// Create email content / Get info from html form.
$string = "Banner order form....\n\n\n";
$string .= "Name: ".$name."\n";
$string .= "Telephone Number: ".$phone."\n\n";
$string .= "Banner Text: ".$bannerText."\n";
$string .= "Banner Size Selected: ".$hidden."\n\n";
$string .= "Path to users Image (If Uploaded):"."\n";
$string .= $img."\n\n" ;
php moves the image to a directory, removes any whitespace from image names and replaces with %20 to create friendly url's to the image as this will also post the url to me so I can retrieve the image etc.
As you can see the $img variable holds the full url for the image......how do i post this url to javascript and display it to the screen once the upload has completed?
Do i need to turn my htm page ito a php page and have the php code in the top of the document and use php_self code etc? If so what do i need to do? (currently the php file resides on it's own in my htdocs folder alongside my html pages)
Any help would be greatly appreciated....
Many thanks for looking
Andrew