jquery使用uploadify插件實現多文件的上傳（java版）

時間 2019-11-24

標籤 jquery 使用 uploadify 插件實現文件上傳 java 欄目 JQuery 简体版

原文原文鏈接

源碼地址：https://git.oschina.net/zhengweishan/UploadDemo_Javajavascript

一、jquery uploadify 下載：http://www.uploadify.com/php

二、安裝，因爲下載下來的例子是php版本的，因此我只留下了主要的幾個文件。如圖：css

三、配置項說明，請自行看文檔。文檔地址：http://www.uploadify.com/documentation/html

四、使用java

前臺頁面：jquery

<%@ 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>

後臺：git

這裏須要用到commons-fileupload組件，自行下載（提供的源碼中有哦~）。apache

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();  
    }  
}

五、最終效果圖有點相似百度上傳文件的頁面效果沒有百度作的好看哈~ 請勿噴dom

相關標籤/搜索