我想知道是否有人可以帮助我。
我真的让自己陷入了困境，我似乎只是围成一圈寻找解决方案。
我创建了this模态对话框页面，允许用户上传图片。我想通过点击this页面上的“上传图片”按钮来访问此内容。
我遇到的问题有两个，但是有联系。
我似乎无法让模态对话框页面充当悬停在父页面上的弹出对话框，而是打开另一个Web浏览器页面，因为我使用了两个提交按钮，我无法获取“提交”功能可以独立工作，即提交表单，另一个打开模态对话框。
我一直在研究这个问题很长一段时间，更改按钮类型，为每个按钮指定特定名称并在Javascript函数中调用它，但我似乎无法找到解决方案。
我只是想知道是否有人可以看看这个并帮助我解决这个问题。
为方便起见，我添加了以下代码：
模态对话
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#dialog").dialog();
modal: true
//getter
var modal = $( ".dialog" ).dialog( "option", "modal" );
//setter
$( ".dialog" ).dialog( "option", "modal", true );
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="dialog">
</head>
<?php
//define a maxim size for the uploaded images
//define ("MAX_SIZE","100");
// define the width and height for the thumbnail
// note that theese dimmensions are considered the maximum dimmension and are not fixed,
// because we have to keep the image ratio intact or it will be deformed
define ("WIDTH","150");
define ("HEIGHT","100");
// this is the function that will create the thumbnail image from the uploaded image
// the resize will be done considering the width and height defined, but without deforming the image
function make_thumb($img_name,$filename,$new_w,$new_h)
{
//get image extension.
$ext=getExtension($img_name);
//creates the new image using the appropriate function from gd library
if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
$src_img=imagecreatefromjpeg($img_name);
if(!strcmp("png",$ext))
$src_img=imagecreatefrompng($img_name);
//gets the dimmensions of the image
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
// next we will calculate the new dimmensions for the thumbnail image
// the next steps will be taken:
// 1. calculate the ratio by dividing the old dimmensions with the new ones
// 2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
// and the height will be calculated so the image ratio will not change
// 3. otherwise we will use the height ratio for the image
// as a result, only one of the dimmensions will be from the fixed ones
$ratio1=$old_x/$new_w;
$ratio2=$old_y/$new_h;
if($ratio1>$ratio2) {
$thumb_w=$new_w;
$thumb_h=$old_y/$ratio1;
}
else {
$thumb_h=$new_h;
$thumb_w=$old_x/$ratio2;
}
// we create a new image with the new dimmensions
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
// resize the big image to the new created one
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);
// output the created image to the file. Now we will have the thumbnail into the file named by $filename
if(!strcmp("png",$ext))
imagepng($dst_img,$filename);
else
imagejpeg($dst_img,$filename);
//destroys source and destination images.
imagedestroy($dst_img);
imagedestroy($src_img);
}
// This function reads the extension of the file.
// It is used to determine if the file is an image by checking the extension.
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
// This variable is used as a flag. The value is initialized with 0 (meaning no error found)
//and it will be changed to 1 if an error occurs. If the error occures the file will not be uploaded.
$errors=0;
// checks if the form has been submitted
if(isset($_POST['Submit']))
{
$title = ($_POST['title']);
if ($title == '') // if title is not set
$title = '(No Title Provided)';// use (empty title) string
//reads the name of the file the user submitted for uploading
$image=$_FILES['image']['name'];
// if it is not empty
if ($image == '')
{
echo '<b> Error! </b> - You <b> must </b> select a file to upload before selecting the <b> "Upload image" </b> button. Please try again.';
$errors=1;
}
else
if ($image)
{
// get the original name of the file from the clients machine
$filename = stripslashes($_FILES['image']['name']);
// get the extension of the file in a lower case format
$extension = getExtension($filename);
$extension = strtolower($extension);
// if it is not a known extension, we will suppose it is an error, print an error message
//and will not upload the file, otherwise we continue
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png"))
{
echo '<b> Error! </b> - The image that you attempted to upload is not in the correct format. The file format <b> must </b> be one of the following: <b> "jpg", "jpeg" </b> or <b> "png" </b>. Please try again.';
$errors=1;
}
else
{
// get the size of the image in bytes
// $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which the uploaded file was stored on the server
$size=getimagesize($_FILES['image']['tmp_name']);
$sizekb=filesize($_FILES['image']['tmp_name']);
//compare the size with the maxim size we defined and print error if bigger
if ($sizekb > 1150000)
{
echo '<b> Error! </b> - The file that you are attempting to upload is greater than the prescribed <b> 1MB </b> limit. Please try again.';
$errors=1;
}
//we will give an unique name, for example the time in unix time format
$image_name=$title.'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$newname="images/".$image_name;
$copied = copy($_FILES['image']['tmp_name'], $newname);
//we verify if the image has been uploaded, and print error instead
if (!$copied)
{
echo '<b> Error! </b> Your file has not been loaded';
$errors=1;
}
else
{
// the new thumbnail image will be placed in images/thumbs/ folder
$thumb_name='images/thumbs/'.$image_name;
// call the function that will create the thumbnail. The function will get as parameters
//the image name, the thumbnail name and the width and height desired for the thumbnail
$thumb=make_thumb($newname,$thumb_name,WIDTH,HEIGHT);
}} }}
//If no errors registred, print the success message and show the thumbnail image created
if(isset($_POST['Submit']) && !$errors)
{
echo '<br><b> Success! </b> - Your image has been uploaded</br>';
echo '<img src="'.$thumb_name.'">';
}
?>
<!-- next comes the form, you must set the enctype to "multipart/form-data" and use an input type "file" -->
<form name="newad" method="post" enctype="multipart/form-data" action="">
<table>
<tr><td><input type="text" name="title" ></td></tr>
<tr><td><input type="file" name="image" ></td></tr>
<tr><td><input name="Submit" type="submit" value="Upload image"></td></tr>
</table>
</form>
</div>
</html>
父页表单代码
<form name="savemyfindstolocation" id="savemyfindstolocation" method="post" action="testdialog.php">
<p><label></label>
</p>
<p align="left">
<input name="userid" type="text" id="userid"/>
<input name="locationid" type="text" id="locationid"/>
<br />
</p>
<div>
<label>
<div align="left">Click on the map to place the marker for the find that has been made and drag until the precise location has been found. </div>
</div>
<p align="left"><label>Find OSGB36 Latitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lat" type="text" id="findosgb36lat" size="20" />
</div>
</div>
<p align="left"><label>Find OSGB36 Longitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lon" type="text" id="findosgb36lon" size="20" />
</div>
</div>
<p align="left"><label>Date of Trip<br />
</label>
</p>
<div>
<div align="left">
<input name="dateoftrip" type="text" id="dateoftrip" size="10" />
</div>
</div>
<p align="left"><label>Find Category</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<?php
mysql_connect("host", "user", "password") or die("Connection Failed");
mysql_select_db("database")or die("Connection Failed");
$query = "SELECT * FROM findcategories";
$result = mysql_query($query);
?>
<select name="findcategory" id="findcategory">
<option value=''>Select a Find Category</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['findcategory'];?>"> <?php echo $line['findcategory'];?> </option>
<?php
}
?>
</select>
</div>
</div>
<p align="left">Find Name</p>
<div>
<div align="left">
<input name="findname" type="text" id="findname" size="35" />
</div>
</div>
<p align="left"> Find Description</p>
<div>
<div align="left">
<input name="finddescription" type="text" id="finddescription" size="150" />
</div>
</div>
<p align="left">
<label> Detector Used</label>
</p>
<div>
<div align="left">
<select id="detectorname" name="detectorname" onchange="getTextList(this)">
<option value="">Select a Detector</option>
<?php
// QUERY DATABASE TO GET CATEGORIES
$query = mysql_query("SELECT detectorid, detectorname FROM detectors ORDER BY detectorname ASC") or die(mysql_error());
// LOOP THROUGH ROWS RETURNED TO CREATE SELECT BOX
while($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['detectorid'].'">'.$row['detectorname'].'</option>';
}
?>
</select>
</div>
</div>
<p align="left">
<label>Search Head Used<br />
</label>
</p>
<div>
<div align="left">
<select id="searchheadname" name="searchheadname">
</select>
</div>
</div>
</div>
<p align="left">
<label>Detector Settings</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<textarea name="detectorsettings" cols="50" rows="12" id="detectorsettings"></textarea>
</div>
</div>
<p align="left">
<label>PAS Ref. (if known)<br />
</label>
</p>
<div>
<div align="left">
<input name="pasref" type="text" id="pasref" size="9" />
</div>
</div>
<p align="left"><label>Additional Comments</label>
</p>
<div>
<div align="left">
<textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments"></textarea>
</div>
</div>
</p>
<p>
<label>
<div align="left">
<input name="uploadimages" type="submit" id="uploadimages" value="Upload Image(s)"/>
</div>
</label>
</p>
<p align="left"><label>Do you wish to make this find public?<br />
</label>
</p>
<div>
<div align="left">
<?php
mysql_connect("host", "user", "password") or die("Connection Failed");
mysql_select_db("database")or die("Connection Failed");
$query = "SELECT * FROM makepublicoptions";
$result = mysql_query($query);
?>
<select name="makepublic" id="makepublic">
<option value=''>Choose 'Yes' or 'No'</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['publicoption'];?>"> <?php echo $line['publicoption'];?> </option>
<?php
}
?>
</select>
</div>
</div>
<p align="left">
<input name="submit" type="submit" value="Submit" />
</form>
真诚的感谢和问候
答案 0 :(得分：0)
Javascript有三个模态对话框 - alert()，confirm()和prompt()。你需要的是一个伪对话框，它基本上禁用了下面的页面并显示了一些自定义HTML。
jQuery UI插件有一些很好的功能，可以用最少的代码执行此操作（有关jQuery对话框的示例，请参阅http://jqueryui.com/demos/dialog/）。
一旦您的对话框的HTML与您的应用程序位于同一页面上，您就应该准备好接收提交和工作，因为它们都在同一个窗口中。
答案 1 :(得分：0)
试试这个：
使用<button>元素代替提交按钮。表格不应该有多个“提交”按钮。
<button name="uploadimages" type="button" id="uploadimages">Upload Image(s)</button>
$(function() { // Is the same as $(document).ready(function() {
$('#uploadimages').on('click', function() {
$("#dialog").dialog({
modal: true
});
});
});