首页 > 代码库 > 【Jsp】使用AjaxFileUploader与jspsmartupload完成不刷新的Ajax文件上传系统
【Jsp】使用AjaxFileUploader与jspsmartupload完成不刷新的Ajax文件上传系统
这个不刷新的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=http://www.mamicode.com/"upload.jsp">返回>
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=http://www.mamicode.com/"js/jquery.js"></script>>
三、备注至此,一个简单的ajax文件上传系统就完成了,部分tomcat可能不支持中文链接,导致图片上传之后无法成功显示,
此时,应该打开tomcat的目录,如apache-tomcat-6.0.43\conf\下的server.xml,用记事本打开,找到Connector port="8080" protocol="HTTP/1.1"那行,加上URIEncoding="UTF-8",如图:
【Jsp】使用AjaxFileUploader与jspsmartupload完成不刷新的Ajax文件上传系统