I have a popup dialog i'm working that allows users to manage images. When they want to choose an image for a particular purpose, they have the option of selecting an image for upload.
so i have a form with a file input that allows them to select an image from their hard drive. i want to allow them to preview that image by loading an iframe on the page with the form. Here's the form page code below. The basic idea is that the onChange event of the FILE INPUT triggers a javascript function which causes the preview i frame to be loaded.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="admin.css" rel="stylesheet" type="text/css">
<title>Site Administration :: CHOOSE AN IMAGE TO UPLOAD</title>
</head>
<body class="popup_body" onLoad=""><div id="upload_form">
<form action="save_uploaded_image.php?sid=" name="upload_form" enctype="multipart/form-data" method="POST">
<input name="input" type="hidden" value="thumb">
<table class="edit_form" border="0" width="100%">
<tr>
<td class="prompt1" valign="middle" height="40">Click 'Browse' to locate an image on your hard drive:<input type="file" name="file_to_upload" onchange="preview_local_file(this.value);"></td>
</tr>
<tr>
<td align="center" valign="top"><iframe name="image_preview" id="image_preview" width="450" height="310"
src="image_preview.php?choosing=1&local=1"></iframe></td>
</tr>
</table><img src="/demo/imagespixeltrans.gif" width="1" height="10"><br>
<input type="button" value="UPLOAD THIS PHOTO" ID="upload_this_image_button" onClick='ValidateAndSubmit(document.upload_form);' disabled> <input name="use_existing_photo" type="button" value="USE AN UPLOADED PHOTO" onclick="window.location='choose_image.php?element=&input=thumb&bg=';"> <input
type="button" name="cancel" value="CANCEL" onclick="window.close();">
</form>
</div>
<div id="busy_message" style="display:none;">
<table width="100%">
<tr><td height="310" align="center" valign="middle">UPLOADING FILE...</td></tr>
</table>
</div>
<script language="Javascript">
<!--
var btnUploadThisImage = document.getElementById('upload_this_image_button');
function EnableImageButtons() {
btnUploadThisImage.disabled=false;
}
function DisableImageButtons() {
btnUploadThisImage.disabled=true;
}
function showBusyMessage() {
var objForm = document.getElementById('upload_form');
objForm.style.display = "none";
var objBusy = document.getElementById('busy_message');
objBusy.style.display = "block";
}
function ValidateAndSubmit(form) {
if (!form.file_to_upload.value) {
alert('You must choose a file to upload.');
form.file_to_upload.focus();
return false;
}
btnUploadThisImage.disabled=true;
form.use_existing_photo.disabled=true;
form.cancel.disabled=true;
showBusyMessage();
form.submit();
}
//-->
function preview_local_file(localfile) {
//alert('attempting to preview local file');
var objIframe = document.getElementById('image_preview');
if (!objIframe) {
alert("Iframe not found.");
}
// objIframe.src = "image_preview.php?choosing=1&img=file://" + escape(localfile) + "&local=1";
objIframe.src = "image_preview.php?choosing=1&img=" + escape("file://" + localfile) + "&local=1";
}
</SCRIPT>
</body>
</html>
This works fine and dandy in IE. But in Mozilla, nothing gets displayed and the Javascript Console reports this error:
Is it possible in mozilla to display a local image on my form when the user selects a file on my form? If not, that's a total drag 🙁
