我想防止打开弹出窗口，如果未从浏览输入框中选择图像。我使用了 return false 和 true ，我也使用了 e.preventDefault() 但它也对我有用。请检查以下代码：
<html>
<head>
<title> Popup Box DIV </title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.resizecrop-1.0.3.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".uploadphoto").click(function() {
if(!$('.FieldRequired').val()){
alert ('Empty value is not allowed');
return false;
}
else{
return true;
// When upload button is pressed, load the Popupbox First
loadPopupBox();
$('#popupBoxClose').click( function() {
unloadPopupBox();
});
$('#container').click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "1.5"
});
} }
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
var imgdiv = $('#popup_box');
$(imgdiv).append(image);
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$(".uploadphoto").click(function() {
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
});
</script>
<script>
$(document).ready(function(){
$('#popup_box img').resizecrop({
width:40,
height:60,
vertical:"top"
});
});
</script>
</head>
<body><input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box"> <!-- OUR PopupBox DIV-->
<a id="popupBoxClose">close</a>
</div>
<div id="container"> <!-- Main Page -->
<h1>sample</h1>
</div>
</body>
</html>
<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:600px;
width:600px;
background:#FFFFFF;
left: 300px;
top: 150px;
z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#popup_box img{ height:600px; width:600px}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a{
cursor: pointer;
text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
background: url("/close.png") no-repeat scroll 0 0 transparent;
color: transparent;
font-size: 20px;
line-height: 26px;
position: absolute;
right: -28px;
top: -14px;
}
</style>
请检查此http://jsfiddle.net/UmJtB/5/以获得更多理解。我只想在选择任何图像时打开弹出窗口。