【Jsp】使用AjaxFileUploader与jspsmartupload完成不刷新的Ajax文件上传系统

来源：互联网发布：不是小偷就是程序员编辑：程序博客网时间：2024/06/09 20:50

这个不刷新的Ajax文件上传系统同样可以用来做预览图

虽然预览图完全可以通过不上传图片就完成，但是不刷新的Ajax文件上传系统可以做到上传完图片立即返回上传结果给用户的结果

上次在《【Jsp】使用jspsmartupload完成简单的文件上传系统》（点击打开链接）一文中完成了一个简单的文件上传系统

但是这个文件上传系统过于传统，

上传完文件之后需要跳转到另外一个页面中提交表单，处理表单，然后再提供一个“返回”按钮给用户

如果用户要求上传之后，马上看到图片，并且不跳转，只好利用Ajax技术来实现，

但是在《【Jsp】Jqueryajax技术在Jsp中的应用与javascript中的正则表达式》（点击打开链接）一文中介绍的Ajax技术只能传输普通的表单文本，

那么如果要求Jsp中的Ajax技术能够传输文件，那该怎么办呢？

这时候，要用到AjaxFileUploader控件来支持文件在Ajax的传输

一、基本目标

能够在一个网页中完成图片的上传，并显示上传的结果，如图：

图的左侧是我tomcat文件夹，图右侧则是我的网页。

如果上传的是非文件，那么则弹出对话框决绝

二、制作过程

1、首先要配置好jspsmartupload与AjaxFileUploader，jspsmartupload在《【Jsp】使用jspsmartupload完成简单的文件上传系统》（点击打开链接）一文中讲过来，其实就是一个jar包，不再赘述，AjaxFileUploader则可以到官网（点击打开链接）中下载，我也给加上传了一份（点击打开链接），然后在eclipse中新建一个工程，把jspsmartupload.jar放到...\WebRoot\WEB-INF\lib之中，AjaxFileUploader是一个压缩包，解压后到AjaxFileUploader如下：

把里面的ajaxfileupload.js与jquery.js复制到工程目录下，最好新建一个文件夹，如WebRoot\js，再与工程目录下新建一个pic文件夹用来存放上传图片，整个目录结构如下图：

其中index.jsp是系统自带的，被笔者涂黑的upload.jsp与本工程无关

2、uploadsuc.jsp

这个文件没什么好说的，原理与《【Jsp】使用jspsmartupload完成简单的文件上传系统》（点击打开链接）一文中的一样，下面是其代码：

<!-- 注意页首两个包是怎么引用的 --><%@ page language="java" import="java.util.*,com.jspsmart.upload.*"pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>上传处理页面</title></head><body><% //之所以要放到异常抛出结构里面，是为了避免直接访问此页报错 try{//指定动作 SmartUpload smart=new SmartUpload(); smart.initialize(pageContext); smart.upload(); //把文件保存到同目录的pic文件夹 smart.save("/pic/"); }catch(Exception e){%>出错！<%} %><a href="upload.jsp">返回</a></body></html>

3、Fileupload.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><!-- 开头引入两个组件文件 --><script src="js/jquery.js"></script><script src="js/ajaxfileupload.js"></script></head><!-- body部分也是一个很简单的表单，注意action必须为空，方式为post，并且注意编码， --><!-- 里面有个file控件，一旦用户选择完文件之后，直接触发下面脚本的ajaxFileUpload()函数提交 --><body><form name="form" action="" method="POST" enctype="multipart/form-data"><input id="myUpload" type="file" name="myUpload" onchange="return ajaxFileUpload();"><!-- 这个id为pic的控件是用来显示上传图片的 --><img id="pic" src="" /></form></body></html><script type="text/javascript">function ajaxFileUpload(){//下面两行代码是先拿到id为myUpload的文件的文件名，注意文件名是这样取的，file控件的values值是一个伪路径，file控件+脚本从来就无法直接操作文件var filename=$("#myUpload").val();filename = filename.substring(filename.lastIndexOf("\\")+1);//下面是取得文件的后缀名，如果后缀名不是图片后缀名，那么则不运行ajax上传代码，之间到下面的else中弹窗exname = filename.substring(filename.lastIndexOf(".")+1);   if(exname.indexOf("png")!=-1||exname.indexOf("jpg")!=-1||exname.indexOf("gif")!=-1||exname.indexOf("bmp")!=-1||exname.indexOf("jpeg")!=-1){$.ajaxFileUpload({url:'uploadsuc.jsp',secureuri:false,//这里的结构与普通ajax是一样的，到uploadsuc.jsp中响应，注意下面的fileElementId就行，指明传递的文件是id为myUpload的东西fileElementId:'myUpload',dataType: 'text',success: function (data){//如果成功，那么则设置id为pic的图片的src，这样pic就能成功显示$("#pic").attr("src","./pic/"+filename);},error: function (data){alert("error");}})}else{alert("必须是图片！");}return false;}</script>

三、备注

至此，一个简单的ajax文件上传系统就完成了，部分tomcat可能不支持中文链接，导致图片上传之后无法成功显示，

此时，应该打开tomcat的目录，如apache-tomcat-6.0.43\conf\下的server.xml，用记事本打开，找到Connector port="8080" protocol="HTTP/1.1"那行，加上URIEncoding="UTF-8"，如图：

0 0