- 如果是文件上传,那么首先想到的,一定是表单封装(enctype=“multipart form-data”,但是这种操作对于用户而言,体验干不好,而且也有可能造成一个非常可怕的局面,如果用户同时山川了许多的内容,(文件信息),当文件太大了,就有可能保存出错,从而导致输入的文字信息丢失,所以不推荐使用表单上传.
- 对于无刷新的组件本次使用uploadify组件,但是这个组件有两个版本,
- SWF()SWFUploadify:免费的,基于Flash完成的,
- HTML5版本:收费的
开发准备
-
首先准备出一个UploadfiyModule模块
-
将smartupload.jar文件配置到项目之中
-
将jQuery开发文件拷贝到js目录之中
-
建立一个uploadify/css文件夹,保存所需要的uploadify组件的css
-
在uploadify目录中建立一个img的目录,
-
再次目录中将所需要的js文件拷贝过去
-
将swf文件拷贝过去
-
jquery-uploadify插件下载地址:http://www.jq22.com/jquery-info103
实现异步上传(无刷新上传)
- 子啊服务器端将使用smartupload组件实现上传处理,所以建立一个UploadServlet程序类.
package mao.shu.servlet;
import com.jspsmart.upload.File;
import com.jspsmart.upload.Files;
import com.jspsmart.upload.SmartUpload;
import com.jspsmart.upload.SmartUploadException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class UploadServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//使用SmartUpload组件完成文件上传操作
SmartUpload smartUpload = new SmartUpload();
//初始化组件
smartUpload.initialize(super.getServletConfig(),request,response);
//将上传文件信息交给组件
try {
smartUpload.upload();
for (int i = 0; i < smartUpload.getFiles().getCount(); i++) {
//得到要上传的每一个文件信息
File file = smartUpload.getFiles().getFile(i);
//输出每一个文件的信息
System.out.println("fileType = "+file.getContentType()+", filesize"+file.getSize()+", filename = "+file.getFieldName());
}
} catch (SmartUploadException e) {
e.printStackTrace();
}
}
}
- 随后需要编写html页面:穿件upload_demo_a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="uploadify/css/uploadify.css">
</head>
<body>
<div id="fileQueue"></div>
<div id="fileDiv"><input type="file" id="pic" name="pic"></div>
</body>
</html>
- 其中fileQueue只要是实现上传队列的生成二"fileDiv"主要是实现上传组件的定义
- 需要对组件进行一些处理操作,利用js完成,在页面中编写JavaScript代码
<script type="text/javascript">
$(function(){
//pic为页面中上传组建的id
//在uploadify函数中完成上传操作
$("#pic").uploadify({
"auto": true,//开启自动上传
//找到swf文件位置
"swf":"uploadify/yokiadify.swf",
//找到文件所执行的程序
"uploader":"UploadServlet",
"buttonText":"请选择上传文件",
"fileObject":"photo"//上传参数的名字
})
})
</script>
- 此时代码一旦执行会自动出现上传序列,随后在服务器端上业会发现相应的输出
-
使用uploadify组件实现的上传处理操作MIME类型都是"applicatioin octet-stream"
-
本次测试的时候发现只有IE浏览器支持,其他浏览器无法使用
异步上传加强
不管是表单上传还是异步上传处操作处理,上传完成之后应该将上传的内容返回给用户去浏览,很多时候都会考虑上传文件进行重命名的操作处理
- 可以将所有的上传文件保存到项目中的upload文件夹中
- 修改UploadServlet.java程序,此程序负责保存文件处理
package mao.shu.servlet;
import com.jspsmart.upload.File;
import com.jspsmart.upload.SmartUpload;
import com.jspsmart.upload.SmartUploadException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.UUID;
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//使用SmartUpload组件完成文件上传操作
SmartUpload smartUpload = new SmartUpload();
//初始化组件
smartUpload.initialize(super.getServletConfig(),request,response);
//将上传文件信息交给组件
try {
smartUpload.upload();
} catch (SmartUploadException e) {
e.printStackTrace();
}
//如果此时有文件要上传
if(smartUpload.getSize()>0){
//得到要上传的每一个文件信息
File file = smartUpload.getFiles().getFile(0);
//定义文件重命名名称
String filename = UUID.randomUUID()+file.getFileExt();
//定义保存文件的路径
String fileSaveAs = super.getServletContext().getRealPath("/upload/")+filename;
//保存每一个文件
try {
file.saveAs(fileSaveAs);
} catch (SmartUploadException e) {
e.printStackTrace();
}
//将文件名称打印到网页中
response.getWriter().print(filename);
}
for (int i = 0; i < smartUpload.getFiles().getCount(); i++) {
//得到要上传的每一个文件信息
File file = smartUpload.getFiles().getFile(i);
//输出每一个文件的信息
System.out.println("fileType = "+file.getContentType()+", filesize = "+file.getSize()+", filename = "+file.getFileName());
}
}
}
-
本程序完成了两个事件,一个是进行上传文件的保存,另外一个时进行上传文件名称的返回
-
此时程序中已经有了上传名称,此时就可以在上传时接收文件名称.然后在根据返回的名称将图片显示处理
-
在也页面中添加一个"imgDiv"元素
<div id="imgDiv"></div>
- 修改页面中的JavaScript代码,添加"onUploadSuccess"事件处理
<script type="text/javascript">
$(function(){
//pic为页面中上传组建的id
//在uploadify函数中完成上传操作
$("#pic").uploadify({
"auto": true,//开启自动上传
//找到swf文件位置
"swf":"uploadify/uploadify.swf",
//找到文件所执行的程序
"uploader":"UploadServlet",
"buttonText":"请选择上传文件",
"fileObject":"photo",//上传参数的名字
//当文件上传成功之后,file描述文件对象,data描述的是请求返回的内容
"onUploadSuccess":function(file,data){
//将文件显示出页面之中
$("#imgDiv").append("<img width='200px' height='200px' src='upload/"+data+"'>")
}
})
})
</script>
- 此时可以选择多个上传文件,但是上传也是一次次上传完成的
-
这个时候当文件上传文件之后会返回当前的图片内容,但是我们需要清楚的是,此时的上传组件可以同时上传多个图片
-
有时有可能需要执行文件的删除处理,可以在上传文件成功之后,进行绑定一个单机事件.
-
修改JavaScript代码
//当文件上传成功之后,file描述文件对象,data描述的是请求返回的内容
"onUploadSuccess":function(file,data){
var imgObj = $("<img width='200px' height='200px' src='upload/"+data+"'>");
imgObj.on("click",function(){
$(this).remove();
});
//将文件显示出页面之中
$("#imgDiv").append(imgObj)
}
最终效果图
上传控制
- 对于此事的上传处理操作发现存在有如下几个问题,
- 发现可以同时穿多个文件,有时候只需要一个文件;
- 发现对于上传的类型无法进行有效的控制;
- 发现上传都是用了自动完成方式.
- 解决多个文件的上传,在uploadify()函数中添加一个multi属性,值设置为false
multi:false,
- 对于上传的类型进行控制,在uploadify函数中添加fileTypeExts属性,fileTypeDesc表示对文件的描述
fileTypeDesc:"图片文件",
fileTypeExts:"*.jpg;*.png;*.gif",
- 队列如果上传完成,那么也可以进行一些提示,使用"onqueueComplete"
- 需要进行额外的参数传递
formData:{
"member.mid":"maoshu",
"member.name":"Mao",
"member.age":20
}
- 这个操作传到服务器上之后可以使用request.getParameter()方法来进行接收
- 设置上传队列的区域所在
queueID:"fileQueue"
- 改变上传队列的大小
queueSizeLimit:3
- 通过自己的操作对上传进行控制
- 如果要进行控制,那么首先要取消自动上传
"auto": false,
- 在页面中添加三个控制按钮
<div id="deleteDiv"><input type="button" value="删除第一个" id="deleteBut"></div>
<div id="upAllDiv"><input type="button" value="全部上传" id="upAllBut"></div>
<div id="deleteAllDiv"><input type="button" value="删除所有" id="deleteAllBut"></div>
- 为这三个按钮绑定点击事件
$("#deleteBut").on("click",function(){
$("#pic").uploadify("cancel");
});
$("#deleteAllBut").on("click",function(){
$("#pic").uploadify("cancel","*");
});
$("#upAllBut").on("click",function(){
$("#pic").uploadify("upload","*");
});
- 最后效果