使用javascript更新图像src

在一个网站上，我使用JavaScript将文件从本地计算机上传到网络服务器。使用javascript更新图像src

我正在使用javascript将文件上传到服务器并更新表单文本字段。在同一个文档中，还有一个图像，除了表单之外，我想用刚刚上传的图像文件更新图像。

这是我的javascript来实现两件事：

更改格式的文本字段：
```
opener.document.form1.logo_material.value="?php echo $prefijo.$str;?>"; 
```
（在<之前?php省略由于编辑限制）这部分工作正常。

只是上传的图片更改图片：

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

（在<之前?php省略由于编辑限制）

这部分＃2不工作。欢迎任何帮助。由于

编辑

表单按钮来调用JS功能：

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

JavaScript函数主文档中：

<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管理所有文件上传和文本字段的变化和还应该管理图像更新：

subirimagenmate rial.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("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), 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>

来源

2015-10-13 mvasco

到底是什么揭幕战？ document.getElementById（“materiallogo”）。src应该可以正常工作。 –

请将您的完整代码添加到您的问题！ – mohsen

@Dontfeed代码，前缀'opener'用于引用已调用外部js文件的文件。 JS文件打开一个窗口，从计算机中选择一个文件，然后关闭时，它会更改表单文本字段的值，并且还应该更改图像 – mvasco

尝试在你的子窗口中更改代码：

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

来源

2015-10-13 06:58:05

谢谢，没有改变实施你的提案。我想我需要找到一种方法来重新加载图像后更改src – mvasco

检查了这一点http://www.codeproject.com/Articles/25388/Accessing-parent-window-from-child-window-or-vice –

我认为你应该使用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

来源

2015-10-13 07:10:09 Anonymous0day

我会看看，谢谢 – mvasco

在线newImg.setAttribute（“id”，curImg.id）;该脚本阻止窗口关闭。 – mvasco

试试这个

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

来源

2015-10-13 07:39:58

使用javascript更新图像src

回答

相关问题