`

Ajax实现文件上传 jackey 好方法

阅读更多

首先要说的就是 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. <form action="upload.jsp" id="form1" name="form1" encType="multipart/form
  4. data"  method="post" target="hidden_frame" >   
  5.     <input type="file" id="file" name="file" style="width:450">   
  6.     <inputtype="submit" value="上传文件">                      
  7. </form>   
  8. <iframe name="hidden_frame"id="hidden_frame" style="display:none"></iframe><span id="msg"></span> 
  9. </body>   
  10. </html>   
  11. <script type="text/javascript">   
  12. function callback(msg)   
  13. {   
  14.     document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;   
  15.     document.getElementById("msg").innerHTML = "<font color=red>"+msg+"</font>";   
  16. }   
  17. </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.     //新建一个SmartUpload对象   
  5.     SmartUpload su = new SmartUpload();   
  6.     //上传初始化   
  7.     su.initialize(pageContext);   
  8.     // 设定上传限制   
  9.     //1.限制每个上传文件的最大长度。   
  10.     su.setMaxFileSize(10000000);   
  11.     //2.限制总上传数据的长度。   
  12.     su.setTotalMaxFileSize(20000000);   
  13.     //3.设定允许上传的文件(通过扩展名限制),仅允许doc,txt文件。   
  14.     su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");   
  15.     boolean sign = true;     
  16.     //4.设定禁止上传的文件(通过扩展名限制),禁止上传带有exe,bat,jsp,htm,html扩展名的文件和没有扩展名的文件。   
  17.     try {   
  18.         su.setDeniedFilesList("exe,bat,jsp,htm,html");   
  19.   
  20.         //上传文件   
  21.         su.upload();   
  22.         //将上传文件保存到指定目录   
  23.         su.save("c:\\");  
  24.     } catch (Exception e) {  
  25.         e.printStackTrace();  
  26.         sign = false;  
  27.     }  
  28.     if(sign==true)  
  29.     {  
  30.         out.println("<script>parent.callback('upload file success')</script>");  
  31.     }
  32.     else  
  33.     {  
  34.         out.println("<script>parent.callback('upload file error')</script>");   
  35.     }   
  36. %>   

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

OK,至此一个无刷新的页面上传组件就做好了,不要忘了在 WEB-INF/lib 下加上必须的 jspSmartUpload.jar 包。

需要说明的是使用Iframe来上传,状态栏还是会有刷新的,因为iframe 中的页面刷新了嘛,但是外部页面,就是你所看到的页面是没有刷新的,所以也可以说是类似Ajax上传。

分享到:
评论
2 楼 mzba520 2010-12-27  
不错受益了
1 楼 itlieying 2010-05-13  
不错,能否共享一下jspSmartUpload.jar 包?

相关推荐

    利用apache的proxy-ajp做apache与tomcat的结合(转载) jackey

    在某些场景下,为了整合两者的优点,我们会利用Apache的`mod_proxy_ajp`模块来实现Apache与Tomcat的结合,以提高系统性能和负载均衡能力。下面将详细介绍这一过程。 `mod_proxy_ajp`是Apache HTTP服务器的一个模块...

    jackey:Jack 元数据属性定义

    杰基Jackey (jack-key) 是一个简单的仅定义标头,用作 Jack 元数据属性键的临时标准。 使用单个标头进行这种协调可以很容易地发现、使用和扩展 Jack 客户端使用的密钥。 没有必要使用这个标头,因为键是由它们的 URI...

    使用 dom4j 解析 XML(转)_jackey

    博文链接:https://qsfwy.iteye.com/blog/219588

    浅谈ORACLE的SQLLDR

    以上两个实例展示了SQL Loader的基本使用方法及其灵活性,可以根据具体需求调整控制文件的内容来实现高效的数据导入。通过这些示例,可以了解到SQL Loader不仅是一个强大的数据导入工具,也是进行数据清洗和预处理的...

    C#操作SQLite数据库之读写数据库的方法

    本文实例讲述了C#操作SQLite数据库之读写数据库的方法。分享给大家供大家参考,具体如下: 这里演示读写数据库并在窗体(Form)中显示其数据,其方式为: 读: Database(SQLite) -> DataAdapter -> DataSet -> ...

    DOS编程详解,BAT高级使用方法.rar

    在IT领域,DOS编程和BAT(批处理)文件的高级使用是早期操作系统中的核心技术,对于理解计算机系统工作原理和自动化任务执行具有重要意义。本文将深入探讨这两个主题,结合具体的例子,帮助读者掌握相关知识。 首先...

    VB实现与PLC通讯

    ### VB实现与PLC通讯的关键知识点 #### 一、串列通信基本概念 串列通信是一种数据传输方式,其中数据按顺序逐位进行传输。它与并行通信相对,后者在同一时间传输多位数据。串列通信的优势在于其简单性和成本效益,...

    IPCC53.0 iOS16.3.1提取

    用户只需将对应运营商的IPCC文件通过iTunes或其他方法导入到iPhone中,即可自动应用更新。 总的来说,IPCC53.0更新对于iOS 16.3.1用户来说,尤其是那些遇到信号问题的用户,可能是一个值得尝试的解决方案。通过更新...

    ipcc 52.0,基于iOS16.1提取

    压缩包子文件的文件名称列表为“ipcc 52”,这可能意味着压缩包内包含有不同运营商的IPCC文件,可能分别对应中国移动、中国联通和中国电信,因为通常IPCC文件会按运营商区分,以满足不同网络环境的需求。用户需要...

    windows-如何查询端口号被哪个程序占用

    当遇到某个端口被占用,而我们不清楚是哪个程序在使用时,可以使用以下方法来查询: 1. **任务管理器**:在Windows系统中,可以通过任务管理器来查看当前运行的进程及其详细信息。打开任务管理器(快捷键Ctrl+Shift...

    WinCVS与CVSNT 使用简介.doc

    WinCVS与CVSNT是Windows环境下用于版本控制的工具,其中WinCVS是图形化的客户端界面,而CVSNT是服务器端的实现。本文主要针对Windows LAN环境下的新手,详细介绍如何配置和使用这两个工具。 **一、CVS简介** CVS...

    dos命令大全dos命令大全dos命令大全

    "DOS命令大全"是一个涵盖所有基本和高级DOS命令的集合,它提供了在命令行环境中执行各种操作的方法。 DOS命令主要分为以下几类: 1. **目录管理**:`dir`用于列出目录中的文件和子目录,`cd`用于切换当前工作目录...

    CVSNT安装手册!!!!!!!!!!!!!!!!!!!

    ### CVSNT安装手册知识点解析 #### 一、CVSNT基本概念 - **Repository (仓库)**:CVS...以上内容涵盖了CVSNT的基本概念及安装配置流程,旨在帮助用户快速理解CVSNT的使用方法,并能够顺利完成其安装与基本配置。

    fpdf17-php做pdf插件

    通过实例化 FPDF 类并调用其方法,可以轻松地创建出结构化的 PDF 文件。例如,你可以使用 `AddPage()` 方法来添加新页面,`SetFont()` 方法来设定字体,`Write()` 方法来写入文本,以及 `Cell()` 方法来绘制表格...

    ssc_lead_acid_battery_simulink电池_sae_simulinkbattery_铅酸蓄电池_铅酸电池模

    此示例演示如何使用Simscape对铅酸蓄电池单元建模 实现等效电路元件非线性方程的语言。这样,与完全在Simulink中建模不同,模型组件和定义物理方程之间的连接更容易理解。有关定义方程及其验证,请参见Jackey,R....

    WIN32 网络编程 SOCKET + CAsyncSock + CSock

    它包括处理HTTP、FTP和Gopher协议的功能,比如下载文件、上传数据、浏览网页等。开发者可以通过WinInet API避免底层Socket编程的复杂性。 5. **ISAPI**:ISAPI是IIS服务器上开发Web应用的标准,它允许程序员用C或...

    超强的三层原代码 3.0 含补丁

    (Jackey, llyygg, 斜?,??舞和其它?友)的??和?助 有???到 QQ群?1005454[煮茶待英雄] http://www.e-midas.cn上?? 本程序在Delphi 6.0 + SQL2000 下通?, 在Delpphi 7.0下 安?控件可能有些??. 本程序所需的所有...

Global site tag (gtag.js) - Google Analytics