JQuery和Struts實現Ajax檔案上傳

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

首先說下使用的架構和外掛程式：

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();}//檔案最大容量 5Mint 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;}}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More