jsp上传图片（记录）

﹏ヽ暗。殇╰゛Y 2022-03-28 03:51 249阅读 0赞

在做大作业时遇到了需要上传图片的场景，把使用方法记录下来。首先准备工作，使用servlet作为后台处理需要的jar包有commons-fileupload-1.3.2、commons-io-2.5.jar，可以去我的网盘下载[https://pan.baidu.com/s/12SUmVJo3nDCNucTSQFlTSw][https_pan.baidu.com_s_12SUmVJo3nDCNucTSQFlTSw]

需要的js文件，jquery和ajaxfileupload.js，链接--->[https://pan.baidu.com/s/1UcBcuYl06UGabFoZfAx89g][https_pan.baidu.com_s_1UcBcuYl06UGabFoZfAx89g]

jsp页面当中，只写了一个带有文件选择的表单，可以调用文件资源管理选择文件即可。js部分的代码使用了ajaxFileUpload提供的方法，将处理的servlet路径，文件格式写明，表单enctype="multipart/form-data"，这样把需要上传的文件以二进制的形式传递。

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>
    
    
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    
    <script type="text/javascript">
    	function ajaxFileUpload()
    	{
    	console.log("file upload");
    	
           $.ajaxFileUpload({
                url:'<%=basePath %>UploadServlet', //需要链接到服务器地址
    			secureuri : false,
    			fileElementId : 'uploadFileInput',
    			dataType : 'json', 
    			success : function(data, status) 
    			{
    				console.log(status);
    				console.log(data);
    				 var parsedJson = jQuery.parseJSON(msg);
    				//$('#result').html('上传图片成功!请复制图片地址<br/>' + parsedJson.src);
    
    			},
    			error : function(data, status, e)
    			{
    				//$('#result').html('上传图片失败');
    			}
    		});
    	}
    	
    	
    </script>
    
    </head>
    <%@ page import="java.util.*,java.io.*" %>
    <body>
    
    <body>
      <div id="result" style="FONT:12px 宋体"></div><br/>
     
      <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>
    <hr>
    <p id="result">
    </p>
    </body>
    
    </body>
    </html>

后台servlet：需要得到当前网站在真实路径、以及使用url访问时的路径，在servlet当中输出了一下，图片根据时间戳重命名。

package cn.test;
    
    import java.io.BufferedInputStream;
    import java.io.BufferedOutputStream;
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.util.Date;
    import java.util.List;
    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.FileItem;
    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;
    
    /**
     * Servlet implementation class 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
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		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;
    		System.out.println("realpath:   "+realPath);
    		System.out.println("----------------");
    		//判断路径是否存在，不存在则创建
    		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}";
    		    System.out.println("可以通过这个地址直接访问上传的图片："+retxt);
    		    response.getWriter().print(retxt);
    		}
    		}catch(Exception ee) {
    			ee.printStackTrace();
    		}
    
    	}
    
    }

效果图：

这是jsp页面的效果图，没什么特别的，选择文件点击上传按钮即可。

![20190109151816967.jpg][]

看servlet中的输出。在servlet中获取realpath时传递的参数为空字符串，获得的也就是当前网站的realpath，realpath为D:\\eclipse-workspace\\.metadata\\.plugins\\org.eclipse.wst.server.core\\tmp0\\wtpwebapps\\test\\uploadfiles，也就是我们在电脑硬盘的这个位置就可以找到我们上传的图片。

同时得到的src为[http://localhost:8080/test/uploadfiles/1547017322411.jpg][http_localhost_8080_test_uploadfiles_1547017322411.jpg]，也就是你在浏览器中输入这个地址就可以看到这张图片，如下面图片所示。

所以，我们将上传的图片通过一个<img>标签显示的时候也就明确了img的src属性要写哪一个路径。

![20190109151913130.jpg][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvcml6b25odWk_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvcml6b25odWk_size_16_color_FFFFFF_t_70 1][]

[https_pan.baidu.com_s_12SUmVJo3nDCNucTSQFlTSw]: https://pan.baidu.com/s/12SUmVJo3nDCNucTSQFlTSw
[https_pan.baidu.com_s_1UcBcuYl06UGabFoZfAx89g]: https://pan.baidu.com/s/1UcBcuYl06UGabFoZfAx89g
[20190109151816967.jpg]: /images/20220328/b61d1e55c1b1488a9e51dc590547c47a.png
[http_localhost_8080_test_uploadfiles_1547017322411.jpg]: http://localhost:8080/test/uploadfiles/1547018903667.jpg
[20190109151913130.jpg]: /images/20220328/59e09e2b16a14d32bffa68904c169300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvcml6b25odWk_size_16_color_FFFFFF_t_70]: /images/20220328/bc9d3bf99b754913a710018a7611750f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvcml6b25odWk_size_16_color_FFFFFF_t_70 1]: /images/20220328/d8c369d8dfee42bbb10a975825f82f27.png