上传页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload file </title>
<script type="text/javascript">
function callback(msg)
{
//document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;
document.getElementById("msg").innerHTML = " <font color=red>"+msg+" </font>";
}
var fload = true;
function f1(){
if(fload){fload = false;return;}
var r = getIFrameContent("hidden_frame");
alert(r);
}
//取iframe的innerHTML
function getIFrameContent(id){
var bobo=document.getElementById(id);
if (document.getElementById){
if (bobo && !window.opera){
if (bobo.contentDocument){
return bobo.contentDocument.body.innerHTML;
}else if(bobo.Document){
return bobo.Document.body.innerHTML;
}
}
}
}
</script>
</head>
<body>
<form action="upload.html" id="form1" name="form1" encType="multipart/form-data" method="post" target="hidden_frame" >
<input type="file" id="file" name="file" style="width:450">
<INPUT type="submit" value="上传文件"> <span id="msg"> </span>
</form>
<iframe name='hidden_frame' id="hidden_frame" style="display:none" onload="f1();"></iframe>
</body>
</html>
上传结果返回页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>upload file </title>
</head>
<body>
</body> fds
</html>
<script type="text/javascript">
parent.callback('upload file success');
</script>
分享到：
相关推荐
本篇将重点讲解如何利用HTML5的`postMessage`和`iframe`技术来实现文件的跨域异步上传。 `postMessage`是HTML5中一种强大的通信机制，它允许来自不同源的脚本采用异步方式进行有限的通信，可以解决同源策略带来的...
在本文中，我们将深入探讨如何使用PHP和IFrame技术实现无刷新的文件上传功能。这种方法在用户界面中提供了一个平滑的体验，因为文件上传不会导致页面重新加载或跳转，而是通过隐藏的IFrame在后台进行。 首先，我们...
"iframe实现无刷新上传下载"是一个利用IFrame和JQuery技术来创建的项目，它允许用户在不刷新整个页面的情况下进行文件的上传和下载操作，提高了交互效率，同时也保持了页面状态的连续性。 首先，我们要理解什么是...
【Ajax、Iframe与JSP实现无刷新文件上传】 在Web开发中，用户常常期望能够进行文件上传而无需页面整体刷新，以提供更好的用户体验。Ajax（异步JavaScript和XML）结合Iframe技术可以实现这样的功能。Ajax允许在后台...
图片上传通常涉及表单提交，我们可以创建一个包含文件输入字段的表单，并将其设置为`iframe`的`target`，这样表单提交就不会导致整个页面刷新。例如： ```html 上传图片" /> ``` 这里的`enctype`属性设为`...
使用隐藏的Iframe实现Ajax无刷新上传的基本思路是：创建一个隐藏的Iframe作为文件上传的目标，当用户选择文件并提交表单后，表单数据会通过POST方式发送到服务器端处理文件上传操作。由于Iframe的存在，上传过程不会...
综上所述，通过`iframe`实现图片异步上传是一种常见的技术方案，它结合了HTML、JavaScript（jQuery）、JSP以及服务器端的处理，实现了无刷新的文件上传体验，提高了用户的交互性和系统的响应速度。在实际应用中，还...
本示例主要探讨如何使用JavaScript结合IFrame技术来实现异步图片上传，并提供预览功能，同时确保兼容Firefox、Chrome和IE9等主流浏览器。 首先，我们需要了解异步上传的基本原理。异步上传，也称为Ajax上传，是指在...
总结来说，通过隐蔽的iframe实现无刷新上传文件操作，可以提供流畅的用户体验。这种方式结合ReactJS、AmazeUI和Node.js，利用iframe的特性以及JavaScript的事件处理机制，能够有效地处理文件上传并在上传完成后更新...
以下是使用IFrame实现AJAX文件上传的基本步骤： 1. 创建一个隐藏的IFrame元素： ```html <iframe id="upload-iframe" name="upload-iframe" style="display:none;"></iframe> ``` 2. 在表单中设置`target`属性...
在 AJAX 出现之前，Web 开发人员就已经能够通过使用 iframe 来实现页面的部分刷新，尤其是对于文件上传这类操作而言。然而，随着 AJAX 的普及，更多的开发者转向了这种更为灵活和现代化的技术。 #### 使用 iframe ...
2. 创建一个`<form>`元素，设置`enctype="multipart/form-data"`以支持文件上传，`target`属性设置为`iframe`的`name`，确保表单提交到`iframe`。 3. 使用JavaScript监听`<iframe>`的`load`事件，当`iframe`加载完成...
综上所述，"ASP上传大全之四iframe上传组件"主要探讨了如何在ASP环境中，利用iframe实现无刷新的文件上传，涉及了HTML、JavaScript、ASP及服务器端的安全控制等多个技术层面。理解和掌握这些知识点，将有助于构建...
同时，为了利用iframe实现无刷新上传，`target`属性应设置为iframe的ID。 3. **IFrame应用** IFrame作为目标表单提交点，可以让表单提交在背景中进行，不更新整个页面。创建一个隐藏的iframe，将表单的`action`...
- 通常，需要创建一个隐藏的iframe来处理文件上传的响应，因为multipart请求不支持异步操作。 4. **Apache Commons FileUpload**： - 除了Servlet API，Apache Commons FileUpload是一个广泛使用的库，它可以简化...
标题“frameset 上传文件窗口最小化（未实现）”表明我们正在探讨如何在使用frameset进行文件上传时，尝试实现上传窗口的最小化功能，但这个功能目前尚未实现。 在描述中提到的“对象是如何传递到TOP页面的”，这...
总结一下，iframe实现的Ajax文件上传主要是通过创建一个隐藏的iframe，将表单的提交目标设置为这个iframe，从而在后台完成文件上传。这种方式避免了页面刷新，提供了更好的用户体验。在实际开发中，还需要考虑错误...
iframe技术允许在一个页面内嵌套另一个独立的页面，因此可以利用iframe创建一个独立的上传页面，将表单提交到该iframe中，从而实现异步上传。由于iframe加载的是另一个独立的页面，因此整个上传过程不会影响到原始...
知识点4：使用iframe实现文件上传 在本文中，我们使用iframe来实现文件上传。iframe是一个HTML元素，能够帮助我们实现文件上传的功能。在本文中，我们使用iframe来提交文件上传的表单，然后使用ajax方法来获取文件...