在一个网站上，我正在使用javascript将文件从本地计算机上传到Web服务器。
我正在使用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也会发生变化，并且还应该管理图像更新：
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>
最佳答案
我认为您应该使用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