帮助，这让我疯了， 我对PHP，javascript，HTML以及最近的jQuery有一定的了解。
我正在使用一个在其自己的页面中完美运行的脚本，但是当从模态窗口调用时，该链接不会单击。
我做错了吗？
这是我的test_uploader.php页面，用于将上传器加载到模式中：
<!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>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script>
$(document).ready(function() {
var dlg=$('#Upload_Photo').dialog({
title: 'Upload Player Photo',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:800,
height:600
});
$('#photo_link').click(function(e) {
dlg.load('index.php', function(){
dlg.dialog('open');
});
});
});
</script>
</head>
<body>
<a href="#" id="photo_link" name="photo_link" >Upload a Photo</a>
<div id="Upload_Photo"></div>
</body>
</html>
这是我的上传者形式index.php
<?php
error_reporting (E_ALL ^ E_NOTICE); #################################################################################################
# Include the image functions - adjust directory as required #
# Please also adjust the directory to this file in the "image_handling.php" page #
include("image_functions.php"); #
#################################################################################################
?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="" />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script type="text/javascript" src="http://www.xxxx.co.uk/uploader/js/jquery-pack.js"></script>
<script type="text/javascript" src="http://www.xxxx.co.uk/uploader/js/jquery.imgareaselect.min.js"></script>
<script type="text/javascript" src="http://www.xxxx.co.uk/uploader/js/jquery.ocupload-packed.js"></script>
<script type="text/javascript">
//<![CDATA[
//create a preview of the selection
function preview(img, selection) {
//get width and height of the uploaded image.
var current_width = $('#uploaded_image').find('#thumbnail').width();
var current_height = $('#uploaded_image').find('#thumbnail').height();
var scaleX = <?php echo $thumb_width;?> / selection.width;
var scaleY = <?php echo $thumb_height;?> / selection.height;
$('#uploaded_image').find('#thumbnail_preview').css({
width: Math.round(scaleX * current_width) + 'px',
height: Math.round(scaleY * current_height) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
//show and hide the loading message
function loadingmessage(msg, show_hide){
if(show_hide=="show"){
$('#loader').show();
$('#progress').show().text(msg);
$('#uploaded_image').html('');
}else if(show_hide=="hide"){
$('#loader').hide();
$('#progress').text('').hide();
}else{
$('#loader').hide();
$('#progress').text('').hide();
$('#uploaded_image').html('');
}
}
//delete the image when the delete link is clicked.
function deleteimage(large_image, thumbnail_image){
loadingmessage('Please wait, deleting images...', 'show');
$.ajax({
type: 'POST',
url: '<?=$image_handling_file?>',
data: 'a=delete&large_image='+large_image+'&thumbnail_image='+thumbnail_image,
cache: false,
success: function(response){
loadingmessage('', 'hide');
response = unescape(response);
var response = response.split("|");
var responseType = response[0];
var responseMsg = response[1];
if(responseType=="success"){
$('#upload_status').show().html('<h1>Success</h1><p>'+responseMsg+'</p>');
$('#uploaded_image').html('');
}else{
$('#upload_status').show().html('<h1>Unexpected Error</h1><p>Please try again</p>'+response);
}
}
});
}
$(document).ready(function () {
$('#loader').hide();
$('#progress').hide();
var myUpload = $('#upload_link').upload({
name: 'image',
action: '<?=$image_handling_file?>',
enctype: 'multipart/form-data',
params: {upload:'Upload'},
autoSubmit: true,
onSubmit: function() {
$('#upload_status').html('').hide();
loadingmessage('Please wait, uploading file...', 'show');
},
onComplete: function(response) {
loadingmessage('', 'hide');
response = unescape(response);
var response = response.split("|");
var responseType = response[0];
var responseMsg = response[1];
if(responseType=="success"){
var current_width = response[2];
var current_height = response[3];
//display message that the file has been uploaded
$('#upload_status').show().html('<h1>Success</h1><p>The image has been uploaded</p>');
//put the image in the appropriate div
$('#uploaded_image').html('<img src="'+responseMsg+'" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" /><div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;"><img src="'+responseMsg+'" style="position: relative;" id="thumbnail_preview" alt="Thumbnail Preview" /></div>')
//find the image inserted above, and allow it to be cropped
$('#uploaded_image').find('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview });
//display the hidden form
$('#thumbnail_form').show();
}else if(responseType=="error"){
$('#upload_status').show().html('<h1>Error</h1><p>'+responseMsg+'</p>');
$('#uploaded_image').html('');
$('#thumbnail_form').hide();
}else{
$('#upload_status').show().html('<h1>Unexpected Error</h1><p>Please try again</p>'+response);
$('#uploaded_image').html('');
$('#thumbnail_form').hide();
}
}
});
//create the thumbnail
$('#save_thumb').click(function() {
var x1 = $('#x1').val();
var y1 = $('#y1').val();
var x2 = $('#x2').val();
var y2 = $('#y2').val();
var w = $('#w').val();
var h = $('#h').val();
if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
alert("You must make a selection first");
return false;
}else{
//hide the selection and disable the imgareaselect plugin
$('#uploaded_image').find('#thumbnail').imgAreaSelect({ disable: true, hide: true });
loadingmessage('Please wait, saving thumbnail....', 'show');
$.ajax({
type: 'POST',
url: '<?=$image_handling_file?>',
data: 'save_thumb=Save Thumbnail&x1='+x1+'&y1='+y1+'&x2='+x2+'&y2='+y2+'&w='+w+'&h='+h,
cache: false,
success: function(response){
loadingmessage('', 'hide');
response = unescape(response);
var response = response.split("|");
var responseType = response[0];
var responseLargeImage = response[1];
var responseThumbImage = response[2];
if(responseType=="success"){
$('#upload_status').show().html('<h1>Success</h1><p>The thumbnail has been saved!</p>');
//load the new images
$('#uploaded_image').html('<img src="'+responseLargeImage+'" alt="Large Image"/> <img src="'+responseThumbImage+'" alt="Thumbnail Image"/><br /><a href="javascript:deleteimage(\''+responseLargeImage+'\', \''+responseThumbImage+'\');">Delete Images</a>');
//hide the thumbnail form
$('#thumbnail_form').hide();
}else{
$('#upload_status').show().html('<h1>Unexpected Error</h1><p>Please try again</p>'+response);
//reactivate the imgareaselect plugin to allow another attempt.
$('#uploaded_image').find('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview });
$('#thumbnail_form').show();
}
}
});
return false;
}
});
});
//]]>
</script>
<h1>Photo Upload and Crop</h1>
<noscript>Javascript must be enabled!</noscript>
<h2>Upload Photo</h2>
<div id="upload_status" style="font-size:12px; width:80%; margin:10px; padding:5px; display:none; border:1px #999 dotted; background:#eee; z-index:99999;"></div>
<p><a id="upload_link" name="upload_link" style="background:#39f; font-size: 24px; color: white; z-index:99999;" href="#">Click here to upload a photo</a></p>
<span id="loader" style="display:none;"><img src="loader.gif" alt="Loading..."/></span> <span id="progress"></span>
<br />
<div id="uploaded_image"></div>
<div id="thumbnail_form" style="display:none;">
<form name="form" action="" method="post">
<input type="hidden" name="x1" value="" id="x1" />
<input type="hidden" name="y1" value="" id="y1" />
<input type="hidden" name="x2" value="" id="x2" />
<input type="hidden" name="y2" value="" id="y2" />
<input type="hidden" name="w" value="" id="w" />
<input type="hidden" name="h" value="" id="h" />
<input type="submit" name="save_thumb" value="Save Thumbnail" id="save_thumb" />
</form>
</div>
这不是我的代码，为了清晰起见，我只删除了版权以减少页面大小。
index.php完美无缺，直到以模态形式调用，您的指导将受到赞赏。