Here is a little java trick i found at V@no's gallery .. which i did not find in the forum..
later managed to incorporate it with my site...
When you choose a file to upload you can see a preview of the file before submit.
-----------------------------------------------
Files to edit:
only twotemplate/{your_template}/header.html
template/{your_template}/member_uploadform.html-----------------------------------------------
Step 1 Open
template/{your_template}/header.htmlInsert
above</head> :
<script type="text/javascript">
<!-- Begin
/***** CUSTOMIZE THESE VARIABLES *****/
// width to resize large images to
var maxWidth=150;
// height to resize large images to
var maxHeight=150;
// valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
// the id of the preview image tag
var outImage="previewField";
// what to display when the image is not valid
var defaultPic="spacer.gif";
/***** DO NOT EDIT BELOW *****/
function preview(what){
var source=what.value;
var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
globalPic=new Image();
if (i<fileTypes.length) globalPic.src=source;
else {
globalPic.src=defaultPic;
alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
}
setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
var field=document.getElementById(outImage);
var x=parseInt(globalPic.width);
var y=parseInt(globalPic.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
field.style.display=(x<1 || y<1)?"none":"";
field.src=globalPic.src;
field.width=x;
field.height=y;
}
// End -->
</script>
Step 2 Open
template/{your_template}/member_uploadform.htmlFind:
<span class="smalltext">
{lang_max_filesize}<b>{max_media_filsize}</b><br />
{lang_max_imagewidth}<b>{max_media_imagewidth}</b><br />
{lang_max_imageheight}<b>{max_media_imageheight}</b><br />
Insert
below:
<img alt="Image preview here" id="previewField" src="{template_url}/images/spacer.gif"><br />
Step 2.1 Find:
<input type="file" name="media_file" class="input" /><br />
Replace with:
<input type="file" name="media_file" onchange="preview(this)" class="input" /><br />
You can customize some of the variables at
Step 1 between
/***** CUSTOMIZE THESE VARIABLES *****/ and
/***** DO NOT EDIT BELOW *****/That's it. Enjoy...
This is my first topic post.. hope i did not make any mistakes..
Lastly Thanks V@no.