以下内容仅供本人开发笔记所用，大家可以借鉴，但并不会很详细：
开发过程中需要异步上传图片，但是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` 被用来实现异步图片上传的功能。以下是具体的技术点和实现步骤： 1. **HTML结构**： 在HTML代码中，我们看到一个`<form>`元素，它包含了一个`<input type="file">`标签，用于让用户选择...
本示例主要探讨如何使用JavaScript结合IFrame技术来实现异步图片上传，并提供预览功能，同时确保兼容Firefox、Chrome和IE9等主流浏览器。 首先，我们需要了解异步上传的基本原理。异步上传，也称为Ajax上传，是指在...
总的来说，PHP中的iframe异步文件上传提供了一种用户体验良好的方式，它允许用户在不离开当前页面的情况下完成文件上传。通过合理的前端JavaScript处理和后端PHP逻辑，我们可以实现安全、高效的异步文件上传功能。在...
在这个案例中，iframe被用来模拟异步通信，因为古老的IE浏览器（尤其是版本7及以下）不支持Ajax的XMLHttpRequest对象，而iframe可以提供一种替代方式来实现跨域通信和数据交换。 2. **Ajax（异步JavaScript和XML）*...
综上所述，"ASP上传大全之四iframe上传组件"主要探讨了如何在ASP环境中，利用iframe实现无刷新的文件上传，涉及了HTML、JavaScript、ASP及服务器端的安全控制等多个技术层面。理解和掌握这些知识点，将有助于构建...
为了实现图片上传，我们需要做以下步骤： 1. **添加上传按钮**：首先，你需要在CKEditor的工具栏上添加一个用于上传图片的按钮。这可以通过修改配置文件或者直接在初始化CKEditor时添加按钮代码实现。例如，你可以...
在本案例中，我们将讨论如何利用`iframe`来实现图片的上传和无刷新展示，以及涉及到的PHP和jQuery技术。 首先，`iframe`的基本用法是在HTML中创建一个`<iframe>`标签，并为其指定`src`属性，指向要加载的页面URL。...
PHP和Ajax实现图片文件上传功能是Web开发中一个常见需求，随着互联网技术的发展，异步文件上传也越来越受到开发者的青睐。异步文件上传指的是在用户不刷新页面的情况下，完成文件的上传过程。常见的实现方式包括使用...
这些资源可以作为学习和交流的实例，帮助理解如何在实际项目中实现图片上传和管理。 总结来说，这个项目展示了如何利用`iframe`技术结合Oracle数据库的Blob类型来实现图片的上传、管理与预览。这涵盖了前端的文件...
Uploader是非常强大的异步文件上传组件，支持ajax、iframe、flash三套方案，实现浏览器的全兼容，调用非常简单，内置多套主题支持 和常用插件，比如验证、图片预览、进度条等，广泛应用于淘宝网，比如退款系统、...
大家应该可以举出几种常用的异步文件上传功能的实现方式，使用频率较多的有原生ajax和iframe框架，实现图片文件上传，下面就为大家分享图片文件上传的两种方式：原生ajax和iframe框架，供大家参考，具体内容如下 ...
在图片上传场景中，iframe常被用来处理文件上传的异步请求，因为文件上传通常涉及到POST表单提交，可能导致页面刷新。通过在iframe中进行表单提交，可以在后台处理文件上传，而不会影响主页面的用户体验。开发者通常...
`iframe`目录可能包含使用IFrame实现上传的示例代码。 6. **更新与清理脚本**： `update.vbs`和`clear.vbs`可能是VBScript编写的脚本，用于更新或清理上传的文件。例如，`update.vbs`可能用于自动更新服务器上的...
本文将深入探讨如何利用Java技术实现在图片上传后立即在页面上显示。首先，我们需要理解这个过程涉及的关键技术点，包括文件上传、文件处理以及前端展示。 1. **文件上传**：Java中的文件上传通常使用Servlet或第三...
"ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传"是一个关于CKEditor自定义插件的实践案例，通过JavaScript实现了图片上传功能。下面将详细阐述这一知识点及其相关技术。 首先，CKEditor是一款开源...
- HTML5 File API：这是实现图片预览的基础，通过`<input type="file">`元素让用户选择文件，并利用FileReader接口读取文件内容，使用`readAsDataURL()`方法将图片转换为Base64编码的URL，然后显示在`<img>`标签中...
2. **IFrame上传**：IFrame方式利用了HTML的IFrame元素，创建一个隐藏的IFrame来提交表单，实现文件的异步上传。这种方式在不支持Flash和HTML5 File API的浏览器中依然有效，但是其性能相对较差，且无法获取到上传...
摘要: 使用iframe来处理异步上传图片，在现在这个时代来说，多多少少都有点落后了！单单就凭AJAX和JS就不能做到异步上传图片了吗？ 感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先...
这篇博客主要讨论了如何使用纯JavaScript在浏览器环境中实现实现图片的选择预览、旋转以及批量上传功能。JavaScript是一种广泛应用于网页开发的编程语言，它允许开发者直接在用户浏览器上运行代码，提供了丰富的交互...