`
talentluke
  • 浏览: 604520 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

iframe实现无刷新上传文件

 
阅读更多

[代码] [HTML]代码

01 <html>   
02 <body>   
03     
04 <form action="upload.jsp" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame" >   
05     <input type="file" id="file" name="file" style="width:450">   
06     <INPUT type="submit" value="上传文件"><span id="msg"></span>   
07     <br>   
08     <font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>                 
09     <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>   
10 </form>   
11     
12 </body>   
13 </html>   
14     
15 <script type="text/javascript">   
16 function callback(msg)   
17 {   
18     document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;   
19     document.getElementById("msg").innerHTML = "<font color=red>"+msg+"</font>";   
20 }   
21 </script>

[代码] 原理就是输出一段js代码到 iframe 中,然后在iframe中来控制它的父页面

01 <%@ page language="java" contentType="text/html; charset=gb2312" %>   
02 <%@ page import="com.jspsmart.upload.SmartUpload"%>   
03     
04 <%   
05     //新建一个SmartUpload对象   
06     SmartUpload su = new SmartUpload();   
07     
08     //上传初始化   
09     su.initialize(pageContext);   
10     
11     // 设定上传限制   
12     //1.限制每个上传文件的最大长度。   
13     su.setMaxFileSize(10000000);   
14     
15     //2.限制总上传数据的长度。   
16     su.setTotalMaxFileSize(20000000);   
17     
18     //3.设定允许上传的文件(通过扩展名限制),仅允许doc,txt文件。   
19     su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");   
20          
21     boolean sign = true;   
22          
23     //4.设定禁止上传的文件(通过扩展名限制),禁止上传带有exe,bat,jsp,htm,html扩展名的文件和没有扩展名的文件。   
24     try {   
25         su.setDeniedFilesList("exe,bat,jsp,htm,html");   
26     
27         //上传文件   
28         su.upload();   
29         //将上传文件保存到指定目录   
30         su.save("c:\\");  
31    
32     } catch (Exception e) {  
33         e.printStackTrace();  
34         sign = false;  
35     }  
36     if(sign==true)  
37     {  
38         out.println("<script>parent.callback('upload file success')</script>");  
39     }else  
40     {  
41         out.println("<script>parent.callback('upload file error')</script>");   
42     }   
43 %>
分享到:
评论

相关推荐

    通过隐蔽iframe实现无刷新上传文件操作_.docx

    总结来说,通过隐蔽的iframe实现无刷新上传文件操作,可以提供流畅的用户体验。这种方式结合ReactJS、AmazeUI和Node.js,利用iframe的特性以及JavaScript的事件处理机制,能够有效地处理文件上传并在上传完成后更新...

    iframe实现无刷新上传下载

    "iframe实现无刷新上传下载"是一个利用IFrame和JQuery技术来创建的项目,它允许用户在不刷新整个页面的情况下进行文件的上传和下载操作,提高了交互效率,同时也保持了页面状态的连续性。 首先,我们要理解什么是...

    asp.net中MVC借助Iframe实现无刷新上传文件实例

    本文实例讲述了asp.net中MVC借助Iframe实现无刷新上传文件的方法。分享给大家供大家参考。具体实现方法如下: html: 代码如下:”uploadwindow” xss=removed>  <form action=”/ShopActivitys/...

    通过隐藏iframe实现无刷新上传文件操作

    本文将详细介绍如何使用隐藏的IFrame实现无刷新上传文件,以及涉及到的相关技术。 首先,我们需要创建一个HTML表单,其中包含一个用于选择文件的`<input type="file">`元素。这个表单的`target`属性设置为一个...

    ajax iframe jsp 无刷新上传文件.zip

    总结,"ajax iframe jsp 无刷新上传文件.zip"包含的知识点涵盖了Ajax与Iframe结合的文件上传技术,JSP服务器端处理,JavaScript字符串操作,Struts2的验证和链接标签,以及Spring入门和JSP请求Action的方法。...

    php+iframe 无刷新上传

    同时,为了利用iframe实现无刷新上传,`target`属性应设置为iframe的ID。 3. **IFrame应用** IFrame作为目标表单提交点,可以让表单提交在背景中进行,不更新整个页面。创建一个隐藏的iframe,将表单的`action`...

    dojo_iframe无刷新上传文件demo.rar

    实例VS2010代码 dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar dojo_iframe无刷新上传文件demo.rar

    无刷新上传文件

    在实现无刷新上传文件时,通常会用到Ajax(异步JavaScript和XML)技术,它通过JavaScript与服务器进行后台通信,更新部分网页内容。Ajax可以使用XMLHttpRequest对象或现代浏览器支持的Fetch API来发送HTTP请求。在...

    使用隐藏的Iframe实现ajax无刷新上传

    使用隐藏的Iframe实现Ajax无刷新上传的基本思路是:创建一个隐藏的Iframe作为文件上传的目标,当用户选择文件并提交表单后,表单数据会通过POST方式发送到服务器端处理文件上传操作。由于Iframe的存在,上传过程不会...

    jsp无刷新上传文件

    本示例以“jsp无刷新上传文件”为主题,结合使用了iframe、AJAX以及jsp技术,实现了这一功能。以下是相关的知识点详解: 1. **iframe(内联框架)**:iframe允许在HTML文档中嵌入另一个HTML文档,常用于实现页面的...

    Ajax无刷新上传文件( jsp版本)

    但是用iFrame来实现无刷新上传文件确实一个很好的选择。ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是...

    JSP_模拟AJAX实现无刷新文件上传

    总结来说,虽然AJAX自身不支持文件上传,但通过巧妙地结合IFRAME和JSP,我们可以实现无刷新的文件上传效果,提高Web应用的用户体验。这种技术在现代Web开发中有着广泛的应用,尤其是在需要大量用户交互的场景下。

    [上传下载]多文件无刷新上传源码

    6. **服务器端处理**:虽然源码主要关注前端部分,但实现无刷新上传还需要服务器端的支持。服务器需要接收并处理这些文件,可能涉及到文件保存、权限控制、大小限制等逻辑。 7. **用户体验优化**:无刷新上传通常会...

    无刷新文件上传实例

    本文将深入探讨无刷新文件上传的原理、实现方式以及相关知识点。 一、无刷新文件上传原理 传统的文件上传通常需要用户填写表单,点击提交按钮后,浏览器会发送一个HTTP请求到服务器,整个页面随之刷新。而无刷新...

    iframe实现页面局部刷新操作

    这里,我们找到`iframe`内的图片链接,并将其应用到页面上的`#imagePreview`元素,实现无刷新的图片展示。 总结起来,通过`iframe`和PHP,我们可以实现一个图片上传的功能,用户选择图片后,图片会被上传到服务器,...

    asp仿163网盘无刷新文件上传

    3. **隐藏IFrame**:由于浏览器的安全限制,直接使用AJAX上传文件并不容易。通常,会利用一个隐藏的IFrame来处理表单提交,这样文件可以被发送到服务器而不会导致页面刷新。 4. **服务器端处理**:`file.asp`可能是...

    jsp+ajax实现无刷新上传文件的方法.docx

    ### jsp+ajax实现无刷新上传文件的方法 #### 概述 在Web开发中,实现文件上传是一项常见的功能。传统的文件上传方式会使得整个页面在文件上传时进行刷新,这不仅影响用户体验,还可能导致用户正在进行的操作丢失。...

    ajax jsp 无刷新上传文件

    ### AJAX与JSP结合实现无刷新文件上传 ...此外,虽然本例中使用了IFrame来实现无刷新的效果,但真正的AJAX实现方式会更灵活和高效,可以使用jQuery等库提供的AJAX方法来进一步优化前端的交互效果。

Global site tag (gtag.js) - Google Analytics