Forum Moderators: open
Thanks, Pat
Here is my form:
<form action="<?=$SCRIPT_NAME;?>" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="5000000">
<p>Upload Image: <input type="file" name="imgfile" size="30" style="height: 24px"><br>
<font size="1">Click browse to upload a local file</font><br>
Use this as your header photo?<input type="radio" name="header" value="yes"><BR> <br>
<input type="submit" value="Upload Image">
</form>
Here is the Javascript I found.
<!-- THREE STEPS TO INSTALL AUTOMATIC IMAGE RESIZER:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<style type="text/css">
<!--
.simple {
border: 1px solid #cccccc; padding: 5px; text-align: center
}
-->
</style>
<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source! http://javascript.internet.com
Created by: Cat Arriola :: http://astrodiva.journalspace.com */
function fixImgs(whichId, maxW) {
var pix=document.getElementById(whichId).getElementsByTagName('img');
for (i=0; i<pix.length; i++) {
w=pix[i].width;
h=pix[i].height;
if (w > maxW) {
f=1-((w - maxW) / w);
pix[i].width=w * f;
pix[i].height=h * f;
}
}
}
//-->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onload="fixImgs('photos', 108) /*('element ID', maximum width)*/">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<div align="center">
<table id="photos" cellspacing="2">
<tr>
<td class="simple"><img src="sample1.jpg" alt="photo 1"></td>
<td class="simple"><img src="sample2.jpg" alt="photo 2"></td>
<td class="simple"><img src="sample3.jpg" alt="photo 3"></td>
</tr>
<tr>
<td class="simple" colspan="3"><b>Live demo:</b> <input type="button" value="Make width 80 pixels" onclick="fixImgs('photos', 80)"></td></tr>
<tr>
<td align="center" colspan="3"><a style="font-size:12px; color:blue; text-decoration:none" href="http://astrodiva.journalspace.com/" target="offsite">C a t m a d e i t!</a></td></tr>
</table>
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 2.07 KB -->
[edited by: DrDoc at 5:21 pm (utc) on June 5, 2006]
You can't resize the photo using JS, you will need to use a server tech. to do this. JS is not able to modify files on the users system, this would create a massive security hole. All the JS you have if doing is changing the width and height attributes of the <img> tag.
Kind regards,
Andrew
<snip>
[edited by: trillianjedi at 1:29 pm (utc) on April 20, 2006]
[edit reason] No sigs and please see TOS #13 [/edit]
Pat
Andrew.
[edited by: trillianjedi at 4:36 pm (utc) on April 20, 2006]
[edit reason] Please read our TOS re: sigs and URL's thanks. [/edit]
Andrew.
[imgfree.net...]
As others have said you need to actually do the image manipulation server side. I have created a content management system for an art site that allows the artist to upload a photo, then using a DHTML tool, choose a crop area or resize attirbutes. These parameters are then passed back to a server side script (PHP) that uses the GD library to do further image manipulation.
Dwayne
