以下内容仅供本人开发笔记所用，大家可以借鉴，但并不会很详细：
开发过程中需要异步上传图片，但是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)
分享到：
相关推荐
iframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.doc
js加iframe轻松实现异步图片上传 可以预览 兼容FF，chrome，ie9
Uploader是非常强大的异步文件上传组件，支持ajax、iframe、flash三套方案，实现浏览器的全兼容，调用非常简单，内置多套主题支持 和常用插件，比如验证、图片预览、进度条等，广泛应用于淘宝网，比如退款系统、...
使用iframe实现图片上传以及上传后的本页面无刷新展示。运行环境是php和jq
大家应该可以举出几种常用的异步文件上传功能的实现方式，使用频率较多的有原生ajax和iframe框架，实现图片文件上传，下面就为大家分享图片文件上传的两种方式：原生ajax和iframe框架，供大家参考，具体内容如下 ...
摘要: 使用iframe来处理异步上传图片，在现在这个时代来说，多多少少都有点落后了！单单就凭AJAX和JS就不能做到异步上传图片了吗？ 感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先...
针对使用低版本浏览器的用户因安全策略导致无法上传文件的问题，采用一种基于Iframe的内联框架的解决方案能够实现异步文件上传、删除等功能。用这种方式上传图片、音视频等多媒体文件时，能在不跳转页面情况下看到所...
目前常用的异步文件上传功能有几种，比较多见的如使用iframe框架形式，ajax功能效果，以及flash+php功能，下面介绍ajax与iframe实现异步文件上传的功能的例子。 方法一，利用jquery ajaxfileupload.js实现文件上传 ...
平时用的比较多的JQuery图片上传插件是Uploadify这个插件，效果很不错，但是由于手机不支持flash，所以不得不再找一个文件上传插件来用了。后来发现ajaxFileUpload这个插件挺不错，所以就用这个插件来做异步上传文件...
做软工作业时，需要实现无刷新异步上传图片到服务器，于是想利用Ajax： 得到file的val，再post过去… 等真正实现的时候才发现，根本行不通。 于是翻来翻去找到一个封装好的js插件，可以实现异步上传文件。 ...
首先要知道， ajax无法发送带有文件的post请求所以，所以还是要用同步的方式，但是刷新的时候，我们不要在原来的页面刷新，去一个隐藏的iframe里面刷新，form表单中action正常填写处理文件上传的操作。紧着着的...
ajaxFileUpload是一个异步上传文件的jQuery插件传统的form表单方式上传文件， 必然会刷新整个页面。 那么在不刷新界面的情况下实现文件的上传呢？ 在 HTML4下， 聪明的程序员们发明了 ajax file upload 方式（form +...
使用AJAX是无法直接上传文件的，一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性，不过代码量会比较大，即使是使用了文件上传插件，例如plupload。 ...
ajax是无法提交文件的，所以在上传图片并预览的时候，我们经常使用Ifame的方法实现看似异步的效果。但是这样总不是很方便的，AjaxFilleUpload.js对上面的方法进行了一个包装，使得我们不用去管理Iframe的一系列操作...
前言： 咋一看标题还挺长的呢，还有这么多功能，其实简化一点就是一个功能，异步表单提交，只是在异步表单提交这个大功能下，可以实现图片上传，模拟ajax技术（其实很早以前就是通过这个方式来实现多浏览器的兼容...
在写这篇文档的时候，各空间商们基本没有采用版本5.2.0，文件异步上传只能使用一个折中的解决方式。此前真正的异步上传业界一直没有实现。国外有一个真正异步上传的例子，但它是在服务端用perl语言获取上传文件的...
心想来个ajax异步上传图片吧，这技术应该很老套了。于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢，将该作者的劳动成果直接“拿来主义了”。很快就把代码全改造了。可是当我把程序发布到服务器上...
8.11 使用AJAX刷新上传图片 8.12 使用AJAX刷新验证PHP会话是否有效 8.13 在AJAX异步调用时显示加载指示器 8.14 在AJAX异步调用时处理JSON数据 8.15 解析XML数据并加载到HTML表格 8.16 jQuery AJAX错误的处理方法 ...