This is my javascript function to check whether a file uploaded is an image format type one! currently i have used the default alert box to return the error message!
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function Validate(oForm) {
var arrInputs = oForm.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry a dig copy may be in a different file format! Formats allowed are " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}
The following code gives a customised dialog box which i want to call instead of the default box
<style>
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
background-color: #7c7d7e;
}
#dlg-header{
background-color:aliceblue;
color: white;
font-size: 20px;
padding: 10px;
margin: 10px 10px 0px 10px;
}
#dlg-body{
background-color: white;
color: black;
font-size: 14px;
padding: 10px;
margin: 0px 10px 0px 10px;
}
#dlg-footer{
background-color: #f2f2f2;
text-align: right;
padding: 10px;
margin: 0px 10px 10px 10px;
}
#dlg-footer button{
background-color: grey;
color: white;
padding: 5px;
border: 0px;
}
</style>
</head>
<body>
<!-- dialog box -->
<div id="white-background">
</div>
<div id="dlgbox">
<div id="dlg-header"></div>
<div id="dlg-body">Sorry a dig copy may be in a different file format! Formats allowed are ".jpg", ".jpeg", ".bmp", ".gif", ".png"</div>
<div id="dlg-footer">
<button onclick="dlgLogin()">Ok</button>
</div>
</div>
<!-- rest of the page -->
<h1>Dialog Box Demo</h1>
<p>This is a dialog box example.</p>
<p>Feel free to experiment with the code.</p>
<p>Click the button below to see the dialog box.</p>
<button onclick="showDialog()">Click Me!</button>
<!-- script of dialog -->
<script>
function dlgLogin(){
var whitebg = document.getElementById("white-background");
var dlg = document.getElementById("dlgbox");
whitebg.style.display = "none";
dlg.style.display = "none";
}
function showDialog(){
var whitebg = document.getElementById("white-background");
var dlg = document.getElementById("dlgbox");
whitebg.style.display = "block";
dlg.style.display = "block";
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
dlg.style.left = (winWidth/2) - 480/2 + "px";
dlg.style.top = "150px";
}
</script>
Please help me to integrate the 2nd code into the 1st code so that i can return the customised dialog box instead of the default alert box
