Question

我想阻止打开弹出窗口，如果没有从浏览输入框中选择图像。我使用了返回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/以获取更多理解。我想在我选择任何图片时打开弹出框。

Answer 1

试试这个

$(".uploadphoto").click(function() {
  if(document.getElementById('files').files.length == 0) 
{
alert('Select an Image first');
return false;
} else {
    loadPopupBox();
}

没有浏览图像时什么也不做

1 个答案: