js动态生成的控件渲染未完成无法赋值怎么办

JavaScript014

js动态生成的控件渲染未完成无法赋值怎么办,第1张

1、强制刷新:当你检查问代码逻辑没有问题的时候,你首先可以在赋值之后强制刷新渲染页面一下,这种时候一般都是多层嵌套或者多层遍历导致的,这种方法只能在当前页面内起作用,如果你是给子组件赋值,就不行。

2、重新销毁创建:如果只改变了子组件的数据,但是子组件没有重新渲染,那么可以重新创建一下这个子组件,其实也就是v-if一下。

<!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/htmlcharset=utf-8" />

<title>无标题文档</title>

<script>

var i=1

function add(){

var top=document.getElementById("top")

var input=document.createElement("input")

var div=document.createElement("div")

div.innerHTML="学生:"+i

div.id=i

i=i+1

input.type="text"

input.name="v"

input.onclick=function remo(){alert(i)top.removeChild(div)}//点击删除控件

input.value="nihao"

input.id="v"

div.appendChild(input)

top.appendChild(div)

}

</script>

</head>

<body>

<div><input type="button" onclick="add()" value="添加" /></div>

<div id="top"></div>

</body>

</html>

首先,你的file控件要放到form表单内,其次,每个file控件的name属性应该不同。下面是我修改后的:

<html>

</head>

<script language="javascript" type="text/ecmascript">

var x=1

//======================

//功能:在表单中input file控件

//参数:parentID---要插入input file控件的父元素ID

// inputID----input file控件的ID

//======================

function createInput(parentID,inputFileID){

var parent=$(parentID)//获取父元素

var div=document.createElement("div")//创建一个div容器用于包含input file

x++

var divName=inputFileID+x//随机div容器的名称

div.id=divName

var aElement=document.createElement("input")//创建input

aElement.name=divName

aElement.type="file"//设置类型为file

var delBtn=document.createElement("input")//再创建一个用于删除input file的Button

delBtn.type="button"

delBtn.value="删除"

delBtn.onclick=function(){ removeInput(parentID,divName)}//为button设置onclick方法

div.appendChild(aElement)//将input file加入div容器

div.appendChild(delBtn)//将删除按钮加入div容器

parent.appendChild(div)//将div容器加入父元素

}

//============================

//功能:删除一个包含input file的div 容器

//参数:parentID---input file控件的父元素ID

// DelDivID----个包含input file的div 容器ID

//============================

function removeInput(parentID,DelDivID){

var parent=$(parentID)

parent.removeChild($(DelDivID))

}

//通过元素ID获取文档中的元素

function $(v){return document.getElementById(v)}

</script>

<body>

<form action="test.php" method="post" enctype="multipart/form-data">

<div align="left" id="div_Pic" style="border:1px solid #CCCCCC">

<input name="PicFile" type="file" id="ShowPicFile">

</div>

<input type="button" onClick="createInput('div_Pic','PicFile')" name="button" id="button" value="+ 继续添加图片">

<input type="submit" value="提交">

</body>

</html>

然后php就可以通过遍历$_FILES来获得每个上传的文件。下面的简单例子只是列出每个文件的原文件名:

<?php

forEach($_FILES as $f){

 echo $f["name"]."<br>"

}

?>