preview button with form file field

s4dadmin · Sep 2, 2004

I am asking anyone who knows the code to post this. In a html form you can have a file field with the browse button, what would be the code for a preview button if you wanted to make sure an image file is the correct one.

Quincy

http://www.512ryders.com

vbkris · Sep 2, 2004

i dont know ty this:
imgpth=document.FormName.FileUploadField.value

img1=new Image()
img1.src=imgpth
if(img.height>0)
{
alert("Correct Image.")
window.open (imgpth)
}
else
{
alert("wrong image.")
}

Known is handfull, Unknown is worldfull

BillyRayPreachersSon · Sep 3, 2004

vbkris,

How on earth will testing the height of an image give the user a preview of it?

You need to either add the image to the page, or set the source of an image on the page to that of the file field value... something like this:

Have an image on your page:

Code:

<img id="previewImage" style="display:none;" />

And then use this JS to set the source of it and then show it:

Code:

document.getElementById('previewImage').src = document.forms['yourFormName'].elements['fileUploadFieldName'].value;
document.getElementById('previewImage').style.display = 'block';

Hope this helps,
Dan

vbkris · Sep 3, 2004

the height is for check whether the image exists, i assume that if height is 0 then the image does not exist, the preview is given by window.open()

Known is handfull, Unknown is worldfull

s4dadmin · Sep 3, 2004

Thanks for the responses. Here is what I used

Code:

<input name="filePicture" type="file" id="filePicture" />
<input type="button" name="Submit2" value="Preview" onclick="nonRTEpreview();" />

<script language="JavaScript">
<!--
function nonRTEpreview() {
	var confirmWin = window.open('preview.asp', '', 'width=500,height=240,status=no,scrollbars=yes,resizable=yes,toolbar=no');
	//give a valid reference between the opener 
//and the popup 
if(confirmWin.opener==null){ 
	confirmWin.opener = self;
 } 
}

// -->
</script>

The preview page has this

Code:

var gPicture=opener.document.form1.filePicture;

	if(gPicture.value==""){
	document.write("<img src='../images/no_image.gif' width=225 height=150>")
	}else{
	document.write("<img src='"+gPicture.value+"' width=225 height=150>")
	}

Quincy

http://www.512ryders.com

LFI · Sep 3, 2004

If you have room on the parent page for a preview pane (this one opens and closes as needed), then something like this will work neatly (and saves the time of opening a new window):

Code:

<html>
<head>
<script>
var f,d;

function view()
{
 if(document.myForm.fileName.value != '')
 {
  if(!f)
  {
   f = document.frames['viewFrame'];
   d = f.document;
  }

  d.open();
  d.write("<html><body><img id='imgTag' src='"+document.myForm.fileName.value.replace(/\\/g,'/')+"' /></body></html>");
  d.close();

  setTimeout("f.resizeTo(f.imgTag.width*1.1, f.imgTag.height*1.1);",0);
 }//end if
 else
  hide();
}

function hide()
{
 if(f)
 {
  d.open();
  d.close();
  f.resizeTo(0,0);
 }
}
</script>
</head>
<body>
<form name='myForm'>
<input type='file' name='fileName' />
<input type='button' onclick='view()' value='View File' />
<input type='button' onclick='hide()' value='Hide File' />
<br />
</form>
<iframe id='viewFrame' width='100%' height='0%' />
</body>
</html>

--Dave

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

preview button with form file field

s4dadmin

Programmer

vbkris

Programmer

BillyRayPreachersSon

Programmer

vbkris

Programmer

s4dadmin

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor