异步实现图片上传用iframe的实现方式
以下内容仅供本人开发笔记所用，大家可以借鉴，但并不会很详细：
开发过程中需要异步上传图片，但是ajax不支持异步图片上传功能，于是便借鉴一下iframe的用法，和ajax一样，均不会刷新原页面，作为原页面的子页面，只会将页面中部分内容变动。
<head>
/** 更新杂志图片上传*/
?function checkUpdate(magazineId){
? var upContent=document.getElementById("updatePic").value;
? if(upContent==''){
? ?alert("请选择要更换的图片！");
? ?return false;
? }else{
? ?document.form1.action="<%=App.webUrl%>/magazine/magazine_updatePic.so?magazineId="+magazineId;
? ?document.form1.target="hidden_frame";/**?此form的target值为以下iframe的name属性值 */
???document.form1.submit();
? ?
? }
?
/** 回调本函数，用于清空文件上传框和显示后台信息*/
?function callback(msg){
??var str;
??if(msg!=''&&msg!='fail'){
???str="杂志图片更新成功！";
??}else if(msg=='fail'){
???str="杂志图片更新失败！";
??}
??$('#target-box').empty();???
??$('#target-box').append("<img id='target1' alt='原图'/>");???
??$('#target1').attr('src', msg);
??document.getElementById("updatePic").outerHTML=document.getElementById("updatePic").outerHTML;
??document.getElementById("msginfo").innerHTML="<font color=red>"+str+"</font>";
?}
</head>
<body>
?
<form name="form1" method="post" ENCTYPE="multipart/form-data">
??
? ?<input type="hidden" name="magazine.id" value="${magazine.id }"/>
? ?<input type="hidden" name="tabIndex" value="${tabIndex }"/>
? ?<p>杂志图片：
? ?<div id="target-box" style="width:125px;height:165px;">??
? ?<img id='target1' src="${magazine.mag_pic_url }" width=125px height=165px/>
? ?</div>
? ?</p>
? ?<div id='msginfo'></div>
? ?<iframe name="hidden_frame" id="hidden_frame" style="display:none"></iframe>
?<input type="file" name="updatePic" id="updatePic" style="width:60%;" style="margin-left:120px;"/>
?<input type="button" value="更换" onclick="checkUpdate('${magazine.id }');" style="margin-left:320px;"/>
?<p>杂志名称：
?<input type=text name="magazine.magzine_name" value="${magazine.magzine_name }" width=150px/>
?</p>
?<p>杂志简介：</p>
?<p>
?<textarea name="magazine.introduce" rows="6" cols="40" style="margin-left:90px;">${magazine.introduce }</textarea>
?</p>?
?<p>杂志分类：
? <officetag:select stylename="magazine" property="mag_type">
?????????? <officetag:paramOptions key="magazine.magazine_type" />???
???? </officetag:select>
?</p>
?<div style="width:100%;text-align:center;">
?<input type="submit" name="Submit" value="确定" onclick="checkForm();" value="关闭" onclick="javascript:window.close();" + picUrl + "')</script>");
??} else {
???out.print("<script>parent.callback('fail')</script>");
??}
?}
?
out会将script放入iframe处，随之调用父页面即主页面中的回调函数callback(msg)
1 楼 guzizai2007 2012-06-22 我按这种方法写，怎么最后在回调函数alert(msg) 显示是defined ？