1.导入jar包
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
servlet-api.jar
2.导入uploadify相关js和css
3.配置web.xml里的servlet
<servlet>
<servlet-name>FileServlet</servlet-name>
<servlet-class>com.zhshch.servlet.MySevlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FileServlet</servlet-name>
<url-pattern>/FileServlet</url-pattern>
</servlet-mapping>
4.编写test上传页面
(1)引入相关依赖js和css
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/default/js/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/default/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/default/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/default/js/easyui-lang-zh_CN.js"></script>
<script src="uploadify/jquery.uploadify.js" type="text/javascript"></script>
<script src="uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
</style>
(2)js部分
<script>
$(function(){
initUploadify("上传文件","file_upload");
}) ;
function initUploadify(filename,myid){
$('#'+myid).uploadify(
{
'debug' : false,
'swf' : 'uploadify/uploadify.swf',//上传按钮的图片,默认是这个flash文件(写死就行)
'uploader' : 'FileServlet',//上传所处理的服务器(处理你上传的文件的地方 也可以是action,需要手动编写)
'cancelImg' : '../uploadfiy/uploadify-cancel.png',//取消图片(写死就行)
'method' : 'post',//(servlet这种方式 对应后台的dopost())
'queueID' : 'fileQueue3',//上传显示进度条的那个div(在html中需要定义的)
'buttonText' : "<a style = 'text-decoration:underline;font-style: italic;font-size:14'>"+filename+"</a>",//(显示按钮的文字)
'height' : 10,
// 'width' : 200,//按钮的宽和高
'auto' : false,//是否自动上传
'multi' : true,//支持多个
'file_types': '*.png;*.jpg',//允许的格式 ,下拉列表只显示此类型的文件(上传文件类型)
'file_size_limit' : 10000,//文件大小(文件大小)
'file_queue_limit' : 10,//允许一次上传个数
'rollover' : true,
'onSelect':function(file){//选择文件的时候
},
'onQueueComplete' : function(queueData) {//当队列中的所有文件上传成功后,弹出共有多少个文件上传成功
//top.$.messager.alert("提示信息:", '上传成功!', "info");
},
'onDisable' : function() {
},//在调用disable方法时候触发
'onCancel' : function() {//取消上传的时候
},
'onUploadStart' : function(file) {//开始上传的时候
},
'onError' : function(errorType, errObj) {//有错误的时候
$.messager.alert("提示信息:", '错误: ' + errObj.info,"error");//($.messager.alert是easyui的写法)
},
'onUploadSuccess' : function(file,data,response) {//当上传成功后,弹出文件的提示
alert("data=" + data);//data内容是后台返回给前台的信息
}
});
}
</script>
(3)html部分
<body>
<form>
<div id="fileQueue3"></div>//显示文件上传进度
<input id="file_upload" name="file_upload" type="file" multiple="true" value="上传" class="easyui-linkbutton">//点击此按钮 会弹出上传框
<a href="javascript:$('#file_upload').uploadify('upload','*')">上传</a>//如果前面js设置了 auto:false,就不会自动上传了,点击此按钮就可以上传了。如果设置为true,是自动上传
<a href="javascript:$('#file_upload').uploadify('stop')">取消所有
</form>
</body>
4.java部分(FielServlet)
public class MySevlet extends HttpServlet {//继承HttpServlet
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
super.doGet(req, resp);
}
//前面js中method:post则会调用这个
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置编码
response.setContentType("text/html;charset=utf-8") ;
request.setCharacterEncoding("utf-8" ) ;
//文件上传的工具类
ServletFileUpload upload = null ;
//返给前台成功或失败的信息
String return_msg = null ;
try{
//实例化工具类
upload = new ServletFileUpload(new DiskFileItemFactory()) ;
//得到文件(流)的集合
List list = upload.parseRequest(request) ;
//遍历
for(int i = 0 , j = list.size() ; i < j ; i++){
//得到第一个文件对象
Object obj = list.get(i) ;
//如果是DiskFileItem的实例,则是我们需要的文件
if(obj instanceof DiskFileItem){
//强转
DiskFileItem diskfile = (DiskFileItem)obj;
//得到上传的文件名。如果上传a.jpg,那name2就等于 a
String name2 = diskfile.getName();
//有的DiskFileItem 不是我们上传的文件,而是其他信息,name是null
//如果name不是null,则是我们要的文件
if(name2 != null){
//f1是在本web工程中存储图片
File f1 = new File(this.getServletContext().getRealPath("/") + "/jpgs/");
//如果不存在本目录,生成
if(!f1.exists()){
f1.mkdir();
}else{
System.out.println(f1.getPath());
}
//得到上传文件的输出流
FileOutputStream file1 = new FileOutputStream( this.getServletContext().getRealPath("/") + "/jpgs/" + name2) ;
//***************************
//f2是在硬盘上的路径
//--/jpgs/会生成d://jpgs
File f2 = new File("/jpgs/");
if(!f2.exists()){
f2.mkdir();
}else{
System.out.println(f2.getPath());
}
FileOutputStream file2 = new FileOutputStream("/jpgs/"+ name2) ;
//Streams.copy相当于流的read和write操作
Streams.copy(diskfile.getInputStream(), file1, true);
Streams.copy(diskfile.getInputStream(), file2, true);
}
}
}
//文件保存成功
return_msg = "文件保存成功" ;
}catch(Exception e){
e.printStackTrace();
//文件保存失败
return_msg = "文件保存失败:" + e.getMessage() ;
}
//把消息返回给前台页面
/*对应前面js的'onUploadSuccess'------alert("data=" + data);//data内容是后台返回给前台的信息
*/
response.getWriter().write(return_msg) ;
response.getWriter().close() ;
}
}
5.页面效果
点击完上传会在相应文件夹生成文件