异步实现图片下传用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 }');" class="magazineButton" 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 styleClass="text" name="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();" class="magazineButton"/>
<input type="button" value="关闭" onclick="javascript:window.close();" class="magazineButton"/>
</div>
</form>
</body>
以下为MagazineAction中所涉及到的方法：
/** 更新电子杂志图片上传*/
public void updatePic() {
String magazineId = this.getRequest().getParameter("magazineId");
int pos = updatePicFileName.lastIndexOf(".");
String extensionName = updatePicFileName.substring(pos);
newFileName = magazineId + extensionName;
String picPath = mag_pic_path + newFileName;
String picUrl = mag_pic_url + newFileName;
File newFile = new File(picPath);
try {
if (newFile.getParentFile().exists()) {
newFile.createNewFile();
} else if (!newFile.getParentFile().exists()) {
newFile.getParentFile().mkdirs();
newFile.createNewFile();
}
} catch (IOException e) {
e.printStackTrace();
}
/** 物理删除图片 */
magazine = magazineDao.getMagazineById(magazineId);
String realpicpath = magazine.getMag_pic_path();
String realpicurl = magazine.getMag_pic_url();
if (null != realpicpath && !"".equals(realpicpath)) {
File picDel = new File(realpicpath);
if (picDel.exists()) {
picDel.delete();
}
}
if (null != realpicurl && !"".equals(realpicurl)) {
File urlDel = new File(realpicurl);
if (urlDel.exists()) {
urlDel.delete();
}
}
/**异常请求页面回显 */
PrintWriter out = null;
try {
out = this.getResponse().getWriter();
} catch (IOException e) {
e.printStackTrace();
}
if (copy(updatePic, newFile)) {
magazine.setMag_pic_path(picPath);
magazine.setMag_pic_url(picUrl);
magazineDao.updateMagazine(magazine);
out.print("<script>parent.callback('" + picUrl + "')</script>");
} else {
out.print("<script>parent.callback('fail')</script>");
}
}
out会将script放入iframe处，随之调用父页面即主页面中的回调函数callback(msg)