Updating image src using javascript

Question

In a web site I am uploading files from local computer to the web server using javascript.

I am using javascript to upload the file to the server and to update a form text field. On the same document there is also an image, outside from the form, and I want to update the image with the just uploaded image file.

This is my javascript to implement both things:

Change form text field:
```
opener.document.form1.logo_material.value="?php echo $prefijo.$str;?>";
```
(the < before ?php is omitted due to edit restrictions) This part works fine.

Change image for just uploaded picture:

opener.document.getElementById("materiallogo").src="..url hidden here../?php echo $prefijo.$str;?>";

(the < before ?php is omitted due to edit restrictions)

This part #2 doesn't work. Any help is welcome. Thanks

EDIT

Form button to call the JS function:

<input type="button" name="button" id="button" value="Upload logo" onclick="javascript:subirimagen();" />

JavaScript function in main document:

<script> 

function subirimagen()

{

    self.name = 'opener';

    remote = open('subirimagenmaterial.php','remote','width=300,height=150,location=no,scrollbars=yes, menubar=no, toolbars=no,resizable=yes,fullscreen=yes, status=yes');

    remote.focus();
    }


</script>

PHP that manages all the file upload and text fields changes and also should manage the image update:

subirimagenmaterial.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Upload Material logo</title>

</head>



<body>



<?php 


 if ((isset($_POST["enviado"])) && ($_POST["enviado"]=="form1")){
$length = 10;

$randomString = substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 0, $length);

$prefijo =  $randomString;


    $nombre_archivo = $_FILES['userfile']['name'];

    $file_upload = "true";
    if ($_FILES['userfile']['size']>200000){
$file_upload="false";
}

    if ($file_upload == 'true'){

   $str=preg_replace('/\s+/', '', $nombre_archivo);
   $str =preg_replace('~&([a-z]{1,2})(acute|cedil|circ|grave|lig|orn|ring|slash|th|tilde|uml);~i', '$1', htmlentities($str, ENT_QUOTES, 'UTF-8'));
    move_uploaded_file($_FILES['userfile']['tmp_name'],"materials/".$prefijo.$str);
    ?>
      <script>

    opener.document.form1.logo_material.value="<?php echo $prefijo.$str;?>";

    opener.document.getElementById("materiallogo").src="h..URL hidden here/<?php echo $prefijo.$str;?>";

    self.close();

    </script>
<?php

    }
    else 
    {
        echo "El archivo seleccionado es superior a 200KB, inténtalo de nuevo con otro archivo de tamaño inferior a 200KB.<BR><BR><BR>";?>
<input type='submit' name='submit' value='Reintentar' onClick="window.location.reload()" />


<?php }
    ?>





    <?php 

}

else {?>

<form id="form1" name="form1" method="post" action="subirimagenmaterial.php" data-ajax="false" enctype="multipart/form-data">

  <p>

    <input name="userfile" type="file" />

  </p>

  <p>

    <input type="submit" name="button" id="button" value="Subir imagen del evento" />

    <input type="hidden" name="enviado" value="form1" />

  </p>


</form>

<?php }?>

</body>

</html>

What exactly is opener? document.getElementById("materiallogo").src should work fine. — Tim Sheehan
– Tim Sheehan, Commented Oct 13, 2015 at 6:44
@Dontfeedthecode, the prefix 'opener' is used to make reference to the file that has called the external js file. The JS file opens a window to select a file from the computer and then, when closed, it changes the form text field value and should also change the image — mvasco
– mvasco, Commented Oct 13, 2015 at 6:47
Have you try jquery? is something like $('#materiallogo').attr(src','www.google.com/dog.jpg'). There might be something wrong with your url too, mind posting the full url? — Chris
– Chris, Commented Oct 13, 2015 at 6:49
just changing the src of an alredy loaded image don't refresh the img ! all events for img are triggered and the "status" is "loaded" — Anonymous0day
– Anonymous0day, Commented Oct 13, 2015 at 6:53

Anonymous0day · Accepted Answer · 2015-10-13 07:33:27Z

1

I think you should use Node.replaceChild.

var curImg = opener.document.getElementById("materiallogo");
var newImg = document.createElement("img");

// give it an id attribute 
newImg.setAttribute("id", curImg.id);

var parentDiv = curImg.parentNode;

// replace existing node curImg with the new img element newImg
parentDiv.replaceChild(curImg, newImg);

newImg.src = '' // <-------------- HERE PUT NEW PATH FOR IMG

edited Oct 13, 2015 at 7:33

answered Oct 13, 2015 at 7:10

Anonymous0day

3,0521 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mvasco Over a year ago

At line newImg.setAttribute("id", curImg.id); the script prevents the window to be closed.

Tim Sheehan · Accepted Answer · 2015-10-13 06:58:05Z

0

Try changing the code in your child window to:

window.opener.document.getElementById('materiallogo').src="something"

answered Oct 13, 2015 at 6:58

Tim Sheehan

4,0141 gold badge17 silver badges18 bronze badges

2 Comments

mvasco Over a year ago

Thank you, no change implementing your proposal. I guess I need to find a way to reload the image after changing the src

Tim Sheehan Over a year ago

Check this out codeproject.com/Articles/25388/…

Vishnu Katpure · Accepted Answer · 2015-10-13 07:39:58Z

0

try this

<script>
  function changePath(fileId,newFilePath){
   var obj = document.getElementById(fileId);
   obj.src = newFilePath;
}
</script>

answered Oct 13, 2015 at 7:39

Vishnu Katpure

3953 silver badges17 bronze badges

Collectives™ on Stack Overflow

Updating image src using javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related