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

实现页面无刷新文件上传

阅读更多

首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是不可能的。
    而本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"方法。
    开始之前先说两句无关的,其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点。当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。ps:Ajax技术基本上可以说是由google公司带起来的,但少 Gmail中上传文件用的还是 IFrame,所以说使用IFrame来上传文件是最好的选择。
    我在这里这里用的技术是jsp,其实asp,php等也是一样可以这么实现的
    一共两个文件就可实现:index.html 和 upload.jsp,在这里讲解一下,文后会附上源码

--index.html

html 代码

   1. <html>  
   2. <body>  
   3.  
   4. <form action="upload.jsp" id="form1" name="form1" encType="multipart/form-data"  method="post" target="hidden_frame" >  
   5.     <input type="file" id="file" name="file" style="width:450">  
   6.     <INPUT type="submit" value="上传文件"><span id="msg"></span>  
   7.     <br>  
   8.     <font color="red">支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传</font>                
   9.     <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> 

 

 index.html 中主要要做的就是写一个 form 和 iframe ,并把 form 的 target 设为 iframe 的名字,注意要把 iframe 设为不可见,其他的都是正常的文件上传的写法,这样刷新的页面就是这个隐藏的 Iframe ,而在 index.html 中是不会有页面刷新的,js的 callback 方法是回调方法。用于清空文件上传框和显示后台信息,注意清空文件上传框的方法,和普通方法有点不一样。

--upload.jsp

jsp 代码

   1. <%@ page language="java" contentType="text/html; charset=gb2312" %>  
   2. <%@ page import="com.jspsmart.upload.SmartUpload"%>  
   3.  
   4. <%  
   5.     //新建一个SmartUpload对象  
   6.     SmartUpload su = new SmartUpload();  
   7.  
   8.     //上传初始化  
   9.     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. %>  

 

 

upload.jsp 中只要注意最后输出的格式就可以了。其实原理就是输出一段js代码到 iframe 中,然后在iframe中来控制它的父页面。

    OK,至此一个无刷新的页面上传组件就做好了,不要忘了在 WEB-INF/lib 下加上必须的 jspSmartUpload.jar 包。
    需要说明的是使用Iframe来上传,状态栏还是会有刷新的,因为iframe 中的页面刷新了嘛,但是外部页面,就是你所看到的页面是没有刷新的,所以也可以说是类似Ajax上传。

分享到:
评论

相关推荐

    asp Ajax无刷新文件上传(带进度条,无组件)

    为了解决这一问题,ASP(Active Server Pages)结合AJAX(Asynchronous JavaScript and XML)技术,实现了无刷新文件上传,同时还提供了进度条显示,提高了交互性。本文将深入探讨这种技术的实现原理及步骤。 一、...

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

    在Web开发中,用户交互体验是一个重要的考量因素,而无刷新文件上传就是提升用户体验的一种技术。AJAX(Asynchronous JavaScript and XML)技术以其异步、无刷新的特性,广泛应用于网页交互,但其本身并不直接支持...

    jq+php无刷新文件上传

    标题“jq+php无刷新文件上传”涉及到的技术主要包括前端的jQuery(jq)库和后端的PHP编程语言,以及实现无刷新(AJAX)文件上传的技术。无刷新文件上传是现代网页应用中常见的一种功能,它允许用户在不刷新整个页面...

    无刷新实现文件上传

    实现无刷新文件上传的具体步骤如下: 1. **前端准备**:创建一个HTML表单,包含文件输入元素。使用JavaScript监听文件输入元素的change事件,当用户选择文件后触发上传操作。 2. **DWR配置**:在服务器端,设置DWR...

    JSP无刷新文件上传的实现

    在IT行业中,无刷新文件上传是一项重要的用户体验优化技术,它使得用户在上传文件时无需等待页面刷新,从而提高交互效率和用户体验。本篇文章将详细探讨如何在JSP(JavaServer Pages)环境中实现这一功能。 首先,...

    无刷新文件上传实例

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

    php 无刷新文件上传

    它允许我们在Ajax请求中发送文件,是实现无刷新文件上传的关键。 二、PHP后端处理 1. **文件上传配置**:在PHP中,需要设置`php.ini`文件中的`upload_max_filesize`、`post_max_size`等参数,确保能接收足够大的...

    上传下载]仿163网盘无刷新文件上传 for Jsp_fileupload_jsp.rar

    【标题解析】 "上传下载]仿163网盘无刷新文件上传 ...这个项目提供了实现无刷新文件上传的一个实例,对于学习JSP和AJAX的开发者来说,是一个有价值的参考资料,可以通过分析源代码了解如何在实际项目中集成这些技术。

    ASP源码—简便无刷新 ASP 文件上传系统.zip

    在本案例中,“ASP源码—简便无刷新 ASP 文件上传系统.zip”是一个包含ASP源代码的压缩包,旨在实现一个无需页面刷新的文件上传功能。这种功能在Web应用程序中非常常见,比如用户在网站上提交表单时上传图片或文档。...

    .NET MVC无刷新文件上传

    总结起来,实现.NET MVC无刷新文件上传的关键步骤包括: 1. 在视图中添加文件选择元素,并绑定`onchange`事件触发Ajax请求。 2. 使用jQuery的`$.ajax`发送文件数据到服务器。 3. 在服务器端的控制器中创建一个处理...

    dwr3实现的无刷新文件上传

    在本项目中,我们看到的"**dwr3实现的无刷新文件上传**"是一个简单的示例,旨在展示如何使用DWR3来实现在不刷新整个页面的情况下上传文件。这对于提升用户体验非常关键,因为它使得用户能够在不离开当前页面的情况下...

    ASP批量上传简便无刷新文件图片上传系统

    这种技术利用Active Server Pages(ASP)脚本语言,与客户端浏览器交互,提供了一个无需页面刷新的用户体验。 在ASP批量上传系统中,有两种常见的上传方式:急速上传和普通上传。急速上传通常依赖于Flash、...

    实现异步文件上传

    实现页面无刷新文件上传,利用ajax技术实现

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

    在ASP中实现无刷新文件上传,主要涉及以下技术点: 1. **AJAX**:无刷新上传的核心是AJAX(Asynchronous JavaScript and XML),它允许前端与后台进行异步通信,无需刷新整个页面。在这个项目中,可能使用了...

    ajaxfileupload1.0.zip 文件无刷新上传代码

    这个压缩包“ajaxfileupload1.0.zip”提供了一种实现无刷新文件上传的解决方案。无刷新上传,也称为异步文件上传,是现代网页应用中常用的一个功能,它允许用户在不重新加载整个页面的情况下发送文件到服务器。这种...

    纯jsp实现文件上传(页面无刷新,表单数据可连续填写最后上传文件)

    为了实现无刷新上传,我们需要在客户端使用JavaScript或jQuery监听表单提交事件,并使用AJAX发送文件和表单数据。这样,页面不会被刷新,用户可以继续填写其他信息: ```javascript $(document).ready(function() {...

    ASP无刷新批量上传文件插件 有进度条

    综上所述,"ASP无刷新批量上传文件插件 有进度条"实现了基于Ajax的无刷新文件上传功能,结合JavaScript和ASP技术,为用户提供了一个友好的界面和实时的进度反馈。这不仅提高了上传效率,也提升了用户的使用体验。

    无刷新文件上传

    以下是一个简单的JavaScript实现无刷新文件上传的步骤: #### 步骤1:创建HTML元素 在HTML中添加一个`<input>`元素,类型为`file`,用于让用户选择要上传的文件。 ```html 上传 ``` #### 步骤2:获取文件并创建...

    简便无刷新asp文件上传系统

    这个标题揭示了一个基于ASP(Active Server Pages)技术的文件上传系统,它的核心特性是“无刷新”,即用户在上传文件时,页面无需重新加载,提供了更为流畅的用户体验。无刷新上传通常通过Ajax(Asynchronous ...

    Ajax无刷新文件上传(带进度条)

    在提供的压缩包文件"Ajax无刷新文件上传(带进度条,无组件)"中,很可能是包含了一个示例代码或者教程,通过阅读"说明.txt",你可以更具体地了解实现这一功能的步骤和代码结构。在实际开发中,结合这些知识和示例,你...

Global site tag (gtag.js) - Google Analytics