JQuery和Struts實現Ajax文件上傳
作者：樊凱
這里將為大家介紹JQuery和Struts實現Ajax文件上傳，使用的框架分別是是struts1.3 jQuery1.3 ajaxupload.3.2.js(一個JQuery的插件，實現Ajax上傳的效果)。
首先說下使用的框架和插件：
Struts1.3 jQuery1.3 ajaxupload.3.2.js(一個JQuery的插件，實現Ajax上傳的效果)
COS(O’relly的一個性能很棒的上傳組件)
JSP頁面：
- <%@ page language="java" pageEncoding="UTF-8"%>
- <%@ include file="../../common/taglibs.jsp" %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <script type="text/javascript" src="${basePath }/script/jquery.js"></script>
- <script type="text/javascript" src="${basePath }/script/ajaxupload.3.2.js"></script>
- <title>Ajax文件上傳示例</title>
- <style type="text/css">
- #loading,ol{
- font-size:14px;
- display:none;
- color:orange;
- display:none;
- }
- ol{
- display:block;
- }
- </style>
- <script type="text/javascript">
- $(function(){
- new AjaxUpload("#fileButton",{
- action:"${basePath}/file.do?method=upload",
- autoSubmit:true,
- name:"myfile",
- onSubmit:function(file, extension){
- if (extension && /^(pdf|jpg|png|jpeg|gif)$/.test(extension))
- {
- $("#loading").html('<img src="${basePath}/images/loading.gif">');
- $("#loading").show();
- $("#fileButton").attr("disabled","disabled");
- }
- else
- {
- $("#loading").html("你所選擇的文件不受系統支持");
- $("#loading").show();
- return false;
- }
- },
- onComplete:function(file, extension){
- $("#loading").html("文件上傳成功");
- $("#loading").show();
- $("#fileButton").removeAttr("disabled");
- }
- });
- new Ajax_upload('#button3', {
- action: '${basePath}/file.do?method=upload',
- name: 'myfile',
- autoSubmit:true,
- onComplete : function(file, extension){
- $('<li></li>').appendTo($('.files')).text(file);
- }
- });
- });
- </script>
- </head>
- <body>
- <input type="button" value="請選擇您的照片" id="fileButton"/>
- <div id="loading"><img src="${basePath}/images/loading.gif"></div>
- <hr/>
- <form action="#" method="post">
- <input id="button3" type="file" />
- <p>上傳成功的文件有:</p>
- <ol class="files"></ol>
- <p>
- <input class="submit" type="submit" value="表單提交"/>
- </p>
- </form>
- </body>
- </html>
- StrutsAction代碼：package com.kay.crm.web;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import org.apache.struts.action.ActionForm;
- import org.apache.struts.action.ActionForward;
- import org.apache.struts.action.ActionMapping;
- import org.apache.struts.actions.DispatchAction;
- import org.springframework.stereotype.Controller;
- import com.kay.common.util.CosUtil;
- @Controller("/file")
- public class FileUploadAction extends DispatchAction {
- public ActionForward upload(ActionMapping mapping, ActionForm form,
- HttpServletRequest request, HttpServletResponse response) throws Exception {
- String fileName = CosUtil.upload(request);
- System.out.println(fileName);
- return null;
- }
- }Cos的工具類：package com.kay.common.util;
- import java.io.File;
- import java.io.IOException;
- import java.util.Enumeration;
- import javax.servlet.http.HttpServletRequest;
- import com.oreilly.servlet.MultipartRequest;
- public class CosUtil {
- @SuppressWarnings({ "deprecation", "unchecked" })
- public static String upload(HttpServletRequest request) throws IOException
- {
- //存絕對路徑
- //String filePath = "C://upload";
- //存相對路徑
- String filePath = request.getRealPath("/")+"upload";
- File uploadPath = new File(filePath);
- //檢查文件夾是否存在 不存在 創建一個
- if(!uploadPath.exists())
- {
- uploadPath.mkdir();
- }
- //文件***容量 5M
- int fileMaxSize = 5*1024*1024;
- //文件名
- String fileName = null;
- //上傳文件數
- int fileCount = 0;
- //重命名策略
- RandomFileRenamePolicy rfrp=new RandomFileRenamePolicy();
- //上傳文件
- MultipartRequest mulit = new MultipartRequest(request,filePath,fileMaxSize,"UTF-8",rfrp);
- String userName = mulit.getParameter("userName");
- System.out.println(userName);
- Enumeration filesname = mulit.getFileNames();
- while(filesname.hasMoreElements()){
- String name = (String)filesname.nextElement();
- fileName = mulit.getFilesystemName(name);
- String contentType = mulit.getContentType(name);
- if(fileName!=null){
- fileCount++;
- }
- System.out.println("文件名：" + fileName);
- System.out.println("文件類型： " + contentType);
- }
- System.out.println("共上傳" + fileCount + "個文件！");
- return fileName;
- }
- }Cos上傳組件用到的重命名策略類：package com.kay.common.util;
- import java.io.File;
- import java.util.Date;
- import com.oreilly.servlet.multipart.FileRenamePolicy;
- public class RandomFileRenamePolicy implements FileRenamePolicy {
- public File rename(File file) {
- String body="";
- String ext="";
- Date date = new Date();
- int pot=file.getName().lastIndexOf(".");
- if(pot!=-1){
- body= date.getTime() +"";
- ext=file.getName().substring(pot);
- }else{
- body=(new Date()).getTime()+"";
- ext="";
- }
- String newName=body+ext;
- file=new File(file.getParent(),newName);
- return file;
- }
- }
【編輯推薦】
責任編輯：彭凡
來源：
cnbeta
