JQuery和Struts实现Ajax文件上传

最新推荐文章于 2020-11-18 14:56:15 发布

lb8607

最新推荐文章于 2020-11-18 14:56:15 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： struts jquery ajax extension upload function

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这里将为大家介绍JQuery和Struts实现Ajax文件上传，使用的框架分别是是struts1.3 jQuery1.3 ajaxupload.3.2.js(一个JQuery的插件，实现Ajax上传的效果)。

AD：

首先说下使用的框架和插件：

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

lb8607

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery和Struts实现Ajax文件上传

这里将为大家介绍JQuery和Struts实现Ajax文件上传，使用的框架分别是是struts1.3 jQuery1.3 ajaxupload.3.2.js(一个JQuery的插件，实现Ajax上传的效果)。AD：首先说下使用的框架和
复制链接

扫一扫

专栏目录