Problem with 'this'

DavidinLondon · June 6th, 2006, 11:09 AM

Hi
I have written an image uploading script using php and js.

My js is a bit shaky when it comes to using the 'this' term for
functions

I am trying to use my UseImgId() and showImg() functions on all
five images ... but as you can see I haven't quite got there and need some help

Sorry the code is abit long but its only the 'this' bit that I don't get.

Thanks

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">

function UseImgId(this){
     document.getElementById('Image1').style.display = '';
      document.getElementById('Image1').src = fullName;
}

    var IE = true;
    if (navigator.appName != "Microsoft Internet Explorer"){IE = false}

    function showImg(){
  
        var fullName = document.forms[0].upLoad.value;
        var fileName = fullName.match(/[^\/\\]+$/);
        var splitName = fullName.split(".");
        var fileType = splitName[1];
        fileType = fileType.toLowerCase();
        if (fileType == 'gif' || fileType == 'jpg' || fileType == 'jpeg')
            {
             if (IE)
                {
                function UseImgId(this){
                }
             document.forms[0].fName.value = 'File name: '+fileName;
            } 
        else       {
              alert('Invalid file type');
            }
    }

</script>
</head>
<body>
<!-- Using a linked stylesheet -->
<link rel="STYLESHEET" type="text/css" href="yodbod.css">
<img alt="header (13K)" src="flashtest1.jpg" height="130" width="920" />

<div style='width:600px; position:absolute; left:40px; top:160px' >
<b><big>Adding pictures to your advert.</big></b><br>
<b>Select your picture files from your computer using the browse buttons.</b><br />
You can have up to five photos for all catagories except Jobs and Careers<br />
which excepts only one (we couldn't see any reason for more!).<br />
</div>

<form name="main_fm" enctype ="multipart/form-data" action="a_picts.php" method="POST">
<input type = 'hidden' name='run' value="on">
<input type="hidden" name ="MAX FILE SIZE" value="500000">
<input type = 'hidden' name='adref' value="<?php echo $A_ref ?>">

<div style='position:absolute; left:40px; top:320px' >
<b>First image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image1').src='';document.getElementById('Image1').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:262px' >
<img height='160' width='160' id="Image1" style='display:none' />
</div>

<div style='position:absolute; left:40px; top:440px' >
<b>Second image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image2').src='';document.getElementById('Image2').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:382px' >
<img height='160' width='160' id="Image2" style='display:none' />
</div>

<div style='position:absolute; left:40px; top:560px' >
<b>Third image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image3').src='';document.getElementById('Image3').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:502px' >
<img height='160' width='160' id="Image3" style='display:none' />
</div>

<div style='position:absolute; left:40px; top:680px' >
<b>Forth image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image4').src='';document.getElementById('Image4').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:622px' >
<img height='160' width='160' id="Image4" style='display:none' />
</div>

<div style='position:absolute; left:40px; top:800px' >
<b>Fifth image:</b><br />
<input type="file" size="50" name="upLoad" onchange="showImg()"><br />
<input type="text" size="50" name="fName" readonly>
<input type="reset" onclick="document.getElementById('Image5').src='';document.getElementById('Image5').style.display='none'">
</div>

<div style='position:absolute; left:500px; top:742px' >
<img height='160' width='160' id="Image5" style='display:none' />
</div>

<div style='position:absolute; left:370px; top:280px' >
<input type="submit" value="Upload All Images">
</div>

</form>
</body>
</html>

ukgeoff · June 7th, 2006, 05:41 AM

'this' is a keyword and is JavaScript's way of saying 'this object'. NOT to be confused with object oriented programming.

When you pass 'this' as a parameter to a function call, the function has a reference to the tag(element) that made the call.

It allows a function that provides an action to be called from multiple 'objects' and know which one to act on.