ajaxfileupload上传

最新推荐文章于 2021-02-06 12:10:44 发布

翻译最新推荐文章于 2021-02-06 12:10:44 发布 · 276 阅读

本文介绍了一种在JSP中实现无刷新上传图片的方法，前端采用jQuery与ajaxfileupload插件，后台利用commons-fileupload处理文件。文章提供了完整的代码示例，包括前端页面展示、图片上传逻辑以及后端文件接收保存的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp中无刷新上传图片(前台使用jquery+ajaxfileupload),后台用commons-fileupload处理

需求:前台选择图片，页面显示上传后的图片地址

代码一:ajaxUploadImg.jsp

请百度搜索，并下载jQuery.js 及 ajaxfileupload.js

[html]view plaincopy 
   
print?
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
 <%  
     String path = request.getContextPath();  
     String basePath = request.getScheme() + "://"  
             + request.getServerName() + ":" + request.getServerPort()  
             + path + "/";  
 %>  
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
 <html>  
   <head>  
     <base href="<%=basePath%>">  
     <meta http-equiv="pragma" content="no-cache">  
     <meta http-equiv="cache-control" content="no-cache">  
     <meta http-equiv="expires" content="0">      
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
     <meta http-equiv="description" content="This is my page">  
     <!-- 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
     -->  
     <script language="javascript" src="<%=basePath%>js/jquery.js" ></script>  
     <script language="javascript" src="<%=basePath%>js/ajaxfileupload.js" > </script>   
     <script language="javascript" type="text/javascript" src="<%=basePath%>js/ezeditor.js"></script>  
     <script type="text/javascript">  
     function ajaxFileUpload()  
     {  
       
     $("#loading")  
         .ajaxStart(function(){  
             $(this).show();  
         })//开始上传文件时显示一个图片  
         .ajaxComplete(function(){  
             $(this).hide();  
         });//文件上传完成将图片隐藏起来  
           
        $.ajaxFileUpload({  
                  url:'<%=basePath %>FileUpload',             //需要链接到服务器地址  
                  secureuri:false,  
                  fileElementId:'uploadFileInput',                         //文件选择框的id属性  
                  dataType: 'json',                                     //服务器返回的格式，可以是json  
                  success: function (data, status)             //相当于java中try语句块的用法  
                  {     
                  //alert(data);       //data是从服务器返回来的值     
                      $('#result').html('上传图片成功!请复制图片地址<br/>'+data.src);  
    
                  },  
                  error: function (data, status, e)             //相当于java中catch语句块的用法  
                  {  
                      $('#result').html('上传图片失败');  
                  }  
                }  
              );  
     }  
     </script>  
   </head>  
     
   <body>   
   <div id="result" style="FONT:12px 宋体"></div><br/>  
  <img id="loading" src="loading.gif" style="display:none;">  
         <form name="form_uploadImg" action="" method="POST" enctype="multipart/form-data">  
  <input id="uploadFileInput" type="file" size="45" name="uploadFileInput" class="input" />  
  <input type="button" id="buttonUpload" onclick="return ajaxFileUpload();" value="上传图片"/>  
  </form>  
 </html>  

代码二: FileUpload.java
这里使用了commons-fileupload-1.2.1.jar的包，可以自行搜索下载
如果使用myeclipse，可以直接在Struts 2 Core Libraies中找到.
commons-fileupload-1.2.1.jar

[java]view plaincopy 
   
print?
 package com.lz.servlet;  
   
 import java.io.BufferedInputStream;  
 import java.io.BufferedOutputStream;  
 import java.io.File;  
 import java.io.FileOutputStream;  
 import java.io.IOException;  
 import java.util.Date;  
 import java.util.regex.Matcher;  
 import java.util.regex.Pattern;  
   
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
   
 import org.apache.commons.fileupload.FileItemIterator;  
 import org.apache.commons.fileupload.FileItemStream;  
 import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
 import org.apache.commons.fileupload.servlet.ServletFileUpload;  
 import org.apache.commons.fileupload.util.Streams;  
   
 public class FileUpload extends HttpServlet {  
   
     public FileUpload() {  
         super();  
     }  
   
     public void destroy() {  
         super.destroy();   
     }  
     public void doGet(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
   
     }  
   
     public void doPost(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
         response.setContentType("text/html");     
         response.setCharacterEncoding("UTF-8");  
         String realDir = request.getSession().getServletContext().getRealPath("");  
         String contextpath = request.getContextPath();  
         String basePath = request.getScheme() + "://"  
         + request.getServerName() + ":" + request.getServerPort()  
         + contextpath + "/";  
   
         try {  
         String filePath = "uploadfiles";  
         String realPath = realDir+"\\"+filePath;  
         //判断路径是否存在，不存在则创建  
         File dir = new File(realPath);  
         if(!dir.isDirectory())  
             dir.mkdir();  
   
         if(ServletFileUpload.isMultipartContent(request)){  
   
             DiskFileItemFactory dff = new DiskFileItemFactory();  
             dff.setRepository(dir);  
             dff.setSizeThreshold(1024000);  
             ServletFileUpload sfu = new ServletFileUpload(dff);  
             FileItemIterator fii = null;  
             fii = sfu.getItemIterator(request);  
             String title = "";   //图片标题  
             String url = "";    //图片地址  
             String fileName = "";  
             String state="SUCCESS";  
             String realFileName="";  
             while(fii.hasNext()){  
                 FileItemStream fis = fii.next();  
   
                 try{  
                     if(!fis.isFormField() && fis.getName().length()>0){  
                         fileName = fis.getName();  
                         Pattern reg=Pattern.compile("[.]jpg|png|jpeg|gif$");  
                         Matcher matcher=reg.matcher(fileName);  
                         if(!matcher.find()) {  
                             state = "文件类型不允许！";  
                             break;  
                         }  
                         realFileName = new Date().getTime()+fileName.substring(fileName.lastIndexOf("."),fileName.length());  
                         url = realPath+"\\"+realFileName;  
   
                         BufferedInputStream in = new BufferedInputStream(fis.openStream());//获得文件输入流  
                         FileOutputStream a = new FileOutputStream(new File(url));  
                         BufferedOutputStream output = new BufferedOutputStream(a);  
                         Streams.copy(in, output, true);//开始把文件写到你指定的上传文件夹  
                     }else{  
                         String fname = fis.getFieldName();  
   
                         if(fname.indexOf("pictitle")!=-1){  
                             BufferedInputStream in = new BufferedInputStream(fis.openStream());  
                             byte c [] = new byte[10];  
                             int n = 0;  
                             while((n=in.read(c))!=-1){  
                                 title = new String(c,0,n);  
                                 break;  
                             }  
                         }  
                     }  
   
                 }catch(Exception e){  
                     e.printStackTrace();  
                 }  
             }  
             response.setStatus(200);  
             String retxt ="{src:'"+basePath+filePath+"/"+realFileName+"',status:success}";  
             response.getWriter().print(retxt);  
         }  
         }catch(Exception ee) {  
             ee.printStackTrace();  
         }  
           
     }  
     public void init() throws ServletException {  
         // Put your code here  
     }  
   
 }  

代码三: web.xml做如下

[html]view plaincopy 
   
print?
 <?xml version="1.0" encoding="UTF-8"?>  
 <web-app version="3.0"   
     xmlns="http://java.sun.com/xml/ns/javaee"   
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  
   <display-name></display-name>   
   <welcome-file-list>  
     <welcome-file>index.jsp</welcome-file>  
   </welcome-file-list>  
   
   <servlet>  
     <servlet-name>FileUpload</servlet-name>  
     <servlet-class>com.lz.servlet.FileUpload</servlet-class>  
   </servlet>  
   
   <servlet-mapping>  
     <servlet-name>FileUpload</servlet-name>  
     <url-pattern>/FileUpload</url-pattern>  
   </servlet-mapping>  
 </web-app>  