Forum Moderators: open
I asked this question awhile back, but am trying to find a solution.
I designed an upload section for two clients. The problem is, unless they name the images before uploading they don't know if they are uploading the right pics.
I instructed them to name the images so they would choose the proper ones, but they are not really savvy users and alot of the files end up with no extension(ie. .jpg).
Is there any way to get the preview box, as you would have in most image programs, so they would know what pics they are choosing, when uploading.
Thanks for any help:)
<added>Uploading via <form></form></added>
This snippet views an image client side. I was surprised it worked because of Javascript security restrictions...but it does!
hope it helps
You could do it without opening a console by doing something like naming a couple of transparent images on your form page. Then assigning the src values to the named images,
eg
function preview(thumb,image,name)
{
document.thumbpreview.src= thumb;
...
}
<img src=spacer.gif name=thumbpreview>
<form>
..
</form>
-Mark
<script type="text/javascript" language="JavaScript">
<!--
function preview(thumb,image,name)
{
//to construct the table.
var thumb_cell,image_cell,name_cell,table,header,footer,style;
//individual rows for the table.
thumb_cell = "<tr><td width='300' align='left' valign='top'>
<img src='"+thumb+"' width='74' height='74' hspace='0' vspace='0' border='0'>";
image_cell = "<tr><td width='300' align='left' valign='top'>
<img src='"+image+"' width='150' height='150' hspace='0' vspace='0' border='0'>";
name_cell = "<tr><td width='300' align='left'>"+name+"</td></tr>";
//table formatting.
table = "<table width='300' cellspacing='0' cellpadding='0' border='0'>";
table += "<tr><td><strong>Name:</td></tr>\n"+name_cell+"\n<tr><td>
<strong>Thumbnail:</td></tr>\n"+thumb_cell+"\n<tr><td><strong>Image:</td></tr>
\n"+image_cell+"\n";
table += "</table>";
//style stuff.
style = "\n<style type='text/css'>\n";
style += "h3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;
font-style: normal; font-weight: bold; color: #FFFFFF; }\n";
style += "td {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt;
font-style: normal; font-weight: normal; color: #FFFFFF; }\n";
style += "</style>";
//header output.
header = "<html>\n<head>\n<title>This is a preview</title>\n"+style+"</head>\n\
<body bgcolor='#20306E' topmargin=0 leftmargin=0 marginwidth=0 marginheight=0
color='#FFFFFF'>";
//footer output.
footer = "</body>\n</html>";
//script to open a new window.
previewWin = window.open('','NewWin','scrollbars=yes,toolbars=no,status=no,width=310,
height=300,left=600,top=160');
//put all the elements into one variable.
page = "\n"+header+"\n"+table+"\n"+footer;
//display the window with the contents.
previewWin.document.write(page);
}
//-->
</script>
<form action="cgi.pl" method="post" enctype="multipart/form-data" name="add" id="add">
Name:
<input type="text" name="what" id="what" size="20" maxlength="40"><BR>
Thumbnail to upload:
<input type="file" name="uploadfile1" id="uploadfile1"><BR>
Image to upload:
<input type="file" name="uploadfile2" id="uploadfile2"><BR>
<input type="hidden" name="action" id="action" value="add">
<button id="preview_but"
onClick="preview(uploadfile1.value,uploadfile2.value,what.value)">Preview</button><BR>
<input type="submit" name="submit" id="submit" value="submit">
<input type="reset" name="reset" id="reset" value="clear the form">
</form>
[edited by: tedster at 3:13 pm (utc) on Feb. 21, 2003]
[edit reason] prevent side-scroll [/edit]
