码迷,mamicode.com
首页 > 编程语言 > 详细

jquery使用uploadify插件实现多文件的上传(java版)

时间:2015-07-13 18:55:44      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

源码地址:https://git.oschina.net/zhengweishan/UploadDemo_Java

1、jquery uploadify 下载:http://www.uploadify.com/

2、安装,由于下载下来的例子是php版本的,所以我只留下了主要的几个文件。如图:

技术分享

3、配置项说明,请自行看文档。文档地址:http://www.uploadify.com/documentation/

4、使用

前台页面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="plugin/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="plugin/uploadify/jquery-1.11.3.js" type="text/javascript"></script>
<script src="plugin/uploadify/jquery.uploadify.js" type="text/javascript"></script>
<script type="text/javascript">  
$(document).ready(function() {  
    $("#uploadify").uploadify({  
        ‘swf‘       : ‘plugin/uploadify/uploadify.swf‘,  
        ‘uploader‘  : ‘UploadServlet‘,    
        ‘folder‘         : ‘/upload‘,  
        ‘queueID‘        : ‘fileQueue‘,
        ‘cancelImg‘      : ‘plugin/uploadify/uploadify-cancel.png‘,
        ‘buttonText‘     : ‘上传文件‘,
        ‘auto‘           : false, //设置true 自动上传 设置false还需要手动点击按钮 
        ‘multi‘          : true,  
        ‘wmode‘          : ‘transparent‘,  
        ‘simUploadLimit‘ : 999,  
        ‘fileTypeExts‘        : ‘*.*‘,  
        ‘fileTypeDesc‘       : ‘All Files‘
    });  
});  
</script>  
</head>
<body>
<div>
        <%--用来作为文件队列区域--%>
        <div id="fileQueue" style="position:absolute; right:50px; bottom:100px;z-index:999">
        </div>
        <input type="file" name="uploadify" id="uploadify"/>
        <p>
            <a href="javascript:$(‘#uploadify‘).uploadify(‘upload‘,‘*‘)">上传</a>| 
            <a href="javascript:$(‘#uploadify‘).uploadify(‘cancel‘,‘*‘)">取消上传</a>
        </p>
        
    </div>
    
</body>
</html>

后台:

这里需要用到commons-fileupload组件,自行下载(提供的源码中有哦~)。

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
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 org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
/**
 * Servlet implementation class UploadServlet
 */
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UploadServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request,response);
}
/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//文件存放的目录  
        File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\");  
        if(!tempDirPath.exists()){  
            tempDirPath.mkdirs();  
        }  
          
        //创建磁盘文件工厂  
        DiskFileItemFactory fac = new DiskFileItemFactory();      
        //创建servlet文件上传组件  
        ServletFileUpload upload = new ServletFileUpload(fac);      
        //文件列表  
        List<FileItem> fileList = null;      
        //解析request从而得到前台传过来的文件  
        try {      
            fileList = upload.parseRequest(request);      
        } catch (FileUploadException ex) {      
            ex.printStackTrace();      
            return;      
        }   
        //保存后的文件名  
        String imageName = null;  
        //便利从前台得到的文件列表  
        Iterator<FileItem> it = fileList.iterator();     
        while(it.hasNext()){      
            FileItem item =  it.next(); 
            //如果不是普通表单域,当做文件域来处理  
            if(!item.isFormField()){  
            imageName = new Date().getTime()+Math.random()*10000+item.getName();  
                BufferedInputStream in = new BufferedInputStream(item.getInputStream());     
                BufferedOutputStream out = new BufferedOutputStream(        
                        new FileOutputStream(new File(tempDirPath+"\\"+imageName)));  
                Streams.copy(in, out, true);  
                  
            }  
        }  
        //  
        PrintWriter out = null;  
        try {  
            out = encodehead(request, response);  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
        //这个地方不能少,否则前台得不到上传的结果  
        out.write("1");
        out.close();   
}
/** 
     * Ajax辅助方法 获取 PrintWriter 
     * @return 
     * @throws IOException  
     * @throws IOException  
     * request.setCharacterEncoding("utf-8"); 
        response.setContentType("text/html; charset=utf-8"); 
     */  
private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{  
        request.setCharacterEncoding("utf-8");  
        response.setContentType("text/html; charset=utf-8");  
        return response.getWriter();  
    }  
}

5、最终效果图 有点类似百度上传文件的页面效果 没有百度做的好看哈~ 请勿喷

技术分享

技术分享


jquery使用uploadify插件实现多文件的上传(java版)

标签:

原文地址:http://my.oschina.net/zhengweishan/blog/478021

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!