关于innerHTML 写出file的问题

shuai45 2010-07-20 08:57:01
当用innerHTML 输出 file上传组建的时候，页面上原有的 file值就变成了空，是怎么回事？
有解决办法吗
...全文
216 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
hoojo 2010-07-20
  • 打赏
  • 举报
 回复
那江哥你就等其他更好的答案了~~
ChinaXtHuLang 2010-07-20
  • 打赏
  • 举报
 回复
都是狠人帮顶了。
shuai45 2010-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 ibm_hoojo 的回复:]
CSS code

<div id="aaa"><input type="file" name="aaa"><input type="text" name="fielValue" /></div>
file选择文件后，加个事件将内容放入隐藏表单域中；然后innerHTML应该可以
[/Quote]
说实话 不好做。
hoojo 2010-07-20
  • 打赏
  • 举报
 回复 


<div id="aaa"><input type="file" name="aaa"><input type="text" name="fielValue" /></div>

file选择文件后，加个事件将内容放入隐藏表单域中；然后innerHTML应该可以
shuai45 2010-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 zjx198934 的回复:]
这样你把要放file的地方放一个DIV代替 把除了FILE的所有元素都innerHTML进去以后 再
var f = document.createElement("input");
f.type = "file";
document.getElementById("div").appendChild(f);
是没问题的！但是要注意加载顺序
[/Quote]
麻烦~
myhope88 2010-07-20
  • 打赏
  • 举报
 回复
不懂，帮顶下
zjx198934 2010-07-20
  • 打赏
  • 举报
 回复
这样你把要放file的地方放一个DIV代替 把除了FILE的所有元素都innerHTML进去以后 再
var f = document.createElement("input");
f.type = "file";
document.getElementById("div").appendChild(f);
是没问题的！但是要注意加载顺序
hoojo 2010-07-20
  • 打赏
  • 举报
 回复 


好像file不能保存你之前选择的内容吧

你用个隐藏表单域或是建一个属性，把file的值保存起来
shuai45 2010-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 ltnrain 的回复:]
HTML code


<!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……
[/Quote]
改动量太大了。
我用 innerHTML 里还有table tr td id name 什么的 。不知道怎么用这样的方法写 ，请赐教。
yousite1 2010-07-20
  • 打赏
  • 举报
 回复
楼上的方法试一下。
草根醉秋意 2010-07-20
  • 打赏
  • 举报
 回复 




<!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>无标题文档</title>



    <script type="text/javascript">

        function add() {

            var f = document.createElement("input");

            f.type = "file";

            document.getElementById("divContainer").appendChild(f);

        }

    </script>



</head>

<body>

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

    <div id="divContainer">

    </div>

</body>

</html>
shuai45 2010-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 zoujp_xyz 的回复:]
引用 2 楼 shuai45 的回复:

假如页面有一组建
<div id="aaa"><input type="file" name="aaa"></div>(已经选择了上传文件，file里有路径了。)

document.getElementById("aaa").innerHTML+='<input type="file" name="aaa">';

file所选中的路径 就……
[/Quote]
没有任何异常，没有任何alert
zoujp_xyz 2010-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 shuai45 的回复:]

假如页面有一组建
<div id="aaa"><input type="file" name="aaa"></div>(已经选择了上传文件，file里有路径了。)

document.getElementById("aaa").innerHTML+='<input type="file" name="aaa">';

file所选中的路径 就为空了。。怪异
[/Quote]
复制前你alert();可能出现null和undefined的情况就为空了
shuai45 2010-07-20
  • 打赏
  • 举报
 回复
假如页面有一组建
<div id="aaa"><input type="file" name="aaa"></div>(已经选择了上传文件，file里有路径了。)

document.getElementById("aaa").innerHTML+='<input type="file" name="aaa">';

file所选中的路径 就为空了。。怪异





草根醉秋意 2010-07-20
  • 打赏
  • 举报
 回复
贴个代码看看
kaifadi 2010-07-20
  • 打赏
  • 举报
 回复
回帖是种美德！
zjx198934 2010-07-20
  • 打赏
  • 举报
 回复
希望能给你启示！因为JS的安全机制，是不能给FILE添加ONCLICK事件的，所以就像一下实现：

[Quote=JS 代码]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">


/* 检测浏览器类型 */
function isIE()
{
if(document.attachEvent)
{
return true;
}
else
{
return false;
}
}

/*firefox下的附件添加提示*/
function getFirefoxTip(form)
{
var str="添加一个附件";
var cssStr="width:100px;font:12px Arial;color:#00f;text-decoration:underline";
var tipDiv=document.createElement("div");
tipDiv.style.cssText=cssStr;
tipDiv.innerHTML=str;
tipDiv.onclick=function()
{
var i=form.getAttribute("count")?form.getAttribute("count"):0;
createFirefoxInput(form,parseInt(i)+1);
};
return tipDiv;
}

/*删除已经添加的附件项*/
function removeChild(parent,child,tip)
{

var i=parent.getAttribute("count");
if(isIE())
{
var id=parseInt(child.getAttribute("id"));
parent.removeChild(child);
parent.removeChild(tip);
i--;
/*
var tipAry=new Array();
var inputAry=new Array();
for(j=0;j<parent.childNodes.length;j++)
{
var node=parent.childNodes[j];
if(node.nodeType==1)
{
if(node.getAttribute("idi"))
{
inputAry.push(node);
}
else if(node.getAttribute("idt"))
{
tipAry.push(node);
}
}
}
for(j=0;j<tipAry.length;j++)
{
var position=getPosition(tipAry[j]);
inputAry[j].style.top=position.top+"px";
inputAry[j].style.left=position.left+"px";
}
*/
var tipAry=rePlaceInput(parent);
if(i==0)
{
tipAry[i].innerHTML="添加一个附件";
}
}
else
{
parent.removeChild(child);
i--;
if(i==0)
{
tip.innerHTML="添加一个附件";
}
}

parent.setAttribute("count",i);

}

/* 添加移除项*/
function getRemove(form,node,tip)
{
var text="移除";
var span=document.createElement("span");
span.style.cssText="font:10px Arial;color:#00f;text-decoration:underline;";
span.innerHTML=text;
span.onclick=function(){removeChild(form,node,tip);}
return span;
}

/* firefox下的文件选择框*/
function createFirefoxInput(form,inputIndex)
{
var i=inputIndex?inputIndex:0;
var tip=i==0?getFirefoxTip(form):form.lastChild;
if(i==0)
{
form.appendChild(tip);
}
else
{
var inputDiv=document.createElement("div");
var input=document.createElement("input");
input.setAttribute("type","file");
input.setAttribute("name","file_"+i);
input.onchange=function(){

}
inputDiv.appendChild(input);
inputDiv.appendChild(getRemove(form,inputDiv,tip));
form.insertBefore(inputDiv,tip);
form.setAttribute("count",i);
tip.innerHTML="再添加一个附件";
}

}

/* firefox下的初始化函数*/
function initFirefox()
{
var form=document.forms['uploadForm'];
createFirefoxInput(form);
}

/* 获取指定元素在页面的位置*/
function getPosition(obj)
{
var top=0,left=0;
while(obj.offsetParent)
{
top+=obj.offsetTop;
left+=obj.offsetLeft;
obj=obj.offsetParent;
}
return {top:top,left:left};
}

/*IE下的附件添加提示*/
function getIeTip(form)
{
var str=parseInt(form.getAttribute("count"))>=0?"再添加一个附件":"添加一个附件";
var cssStr="font:12px Arial;color:#00f;text-decoration:underline";
var tipDiv=document.createElement("div");
tipDiv.style.cssText=cssStr;
tipDiv.innerHTML=str;
return tipDiv;
}

/*IE下的文件按选择显示*/
function updateIeInput(input,tip)
{
var parent=input.parentNode;
parent.style.zIndex=-2;
tip.style.textDecoration="none";
tip.style.color="#000000";
tip.style.fontWeight="bold";
tip.innerHTML=input.value;
tip.appendChild(getRemove(input.form,parent,tip));
}

/*创建IE下的文件选择框*/
function createIeInput(form,inputIndex)
{
var i=inputIndex?inputIndex:0;
var tip=getIeTip(form);
tip.setAttribute("idt",i)
form.appendChild(tip);
var inputDiv=document.createElement("div");
var input=document.createElement("input");
input.setAttribute("type","file");
input.setAttribute("name","file_"+i);
input.style.cssText="width:0";
input.onchange=function(){
createIeInput(this.form,parseInt(this.form.getAttribute("count"))+1);
updateIeInput(this,tip);
rePlaceInput(this.form);
}

inputDiv.appendChild(input);

inputDiv.setAttribute("idi",i);
var position=getPosition(tip);
inputDiv.style.cssText="position:absolute;top:"+position.top+"px;left:"+position.left+"px;filter:alpha(opacity=0);z-index:2";
form.appendChild(inputDiv);
form.setAttribute("count",i);

}

/* 重新置位*/
function rePlaceInput(parent)
{
var tipAry=new Array();
var inputAry=new Array();
for(j=0;j<parent.childNodes.length;j++)
{
var node=parent.childNodes[j];
if(node.nodeType==1)
{
if(node.getAttribute("idi"))
{
inputAry.push(node);
}
else if(node.getAttribute("idt"))
{
tipAry.push(node);
}
}
}
for(j=0;j<tipAry.length;j++)
{
var position=getPosition(tipAry[j]);
inputAry[j].style.top=position.top+"px";
inputAry[j].style.left=position.left+"px";
}
return tipAry;
}

/*初始化IE*/
function initIE()
{
var form=document.forms["uploadForm"];
createIeInput(form);
window.onresize=function(){
rePlaceInput(form);
}
}

/*初始化*/
function init()
{
if(isIE())
{
initIE();
}
else
{
initFirefox();
}
}
</script>
</HEAD>

<BODY onload="init()">
<form name="uploadForm" action="/upload.do" target="upload" enctype="multipart/form-data" method="post"></form>
<iframe name="upload" style="display:none"></iframe>
</BODY></HTML>
[/Quote]
gghaomm 2010-07-20
  • 打赏
  • 举报
 回复
LZ是想做多文件上传的效果吧？
<input type=file> 的value属性是只读的， 所以是不可能赋值。就是不能用JS来操作
所以就会出现LZ你这样的结果..
请楼主想其它方法实现吧..
IE innerHTML(转载)
错误信息：htmlfile: 未知的运行时错误给innerHTML赋值时产生未知的运行时错误这就是IE叫人郁闷加恶心的地方：在IE中经常通过innerHTML来改变界面但也经常出现以上错误,在firefox里则不会。这是因为IE在对innerHTML...
多文件上传关于input type=file元素
我们都知道，html5中有个input type=file元素。用该元素可以实现页面...页面上写一个input，然后选俩个图片，打印这个input对象 $("input[name='file1']").change( function(e){ console.log($("i...
html input type=file
一、 input type=file与...但是，为了习惯，我们多写成：&lt;input type="file"&gt;在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：&lt;input type="file" /&gt;顾名思...
innerHTML的用法、、
function Test(){ var str=""; str+="Hello,"; str+="This is a Test!"; str+="I Love you;"; str+="I Love you,too!"; p.innerHTML=str+""+Math.random(); setTi
关于input type=“file”的及其files对象的深层探究
我们都知道，html5中有个input type=file元素。...我来研究一下深层东西想要了解它，就要知道它的内置对象，files页面上写一个input，然后选俩个图片，打印这个input对象$("input[name='file1']")....
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章