2013-05-24 4 views
-1

Я хочу предотвратить вскрытие всплывающего окна, если изображение не выбрано из окна ввода окна просмотра. Я использовал return false и true, я также использовал e.preventDefault(), но также и dosent работал на меня. Пожалуйста, проверьте ниже код:ничего не делать, когда изображение не просматривается

<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/ для более understanding.I хотят, чтобы открыть всплывающее окно, только если я выбрал любое изображение.

+0

@PSL Yes.and одно сообщение оповещения должны там для выбора изображения. – Rash

+0

@PSL alert («Выберите любое изображение»); – Rash

ответ

1

попробовать этот

$(".uploadphoto").click(function() { 
    if(document.getElementById('files').files.length == 0) 
{ 
alert('Select an Image first'); 
return false; 
} else { 
    loadPopupBox(); 
} 
Смежные вопросы