CODEWITHSUNDEEP
javascriptjqueryhtml
mvasco
mvasco

Reputation: 5107

Updating image src using javascript

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:

  1. 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.

  2. 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>

Upvotes: 0

Views: 175

Answers (3)

Vishnu Katpure
Vishnu Katpure

Reputation: 395

try this

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

Upvotes: 0

Anonymous0day
Anonymous0day

Reputation: 3042

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

Upvotes: 1

Tim Sheehan
Tim Sheehan

Reputation: 4014

Try changing the code in your child window to:

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

Upvotes: 0

Related Questions