Spring MVC + ajaxFileUpload 传图片到tomcat服务器与存路径到数据库

原创 2018年04月16日 02:45:33

最近在做一个后台系统,需要给用户添加照片,但由于是用的ssm框架以前的图片上传类不能使用,翻来覆去弄了8-9个小时,在借助度娘和csdn博客上各位大神的情况下终于成功了,把过程记录下来分享给大家,希望能对大家有所帮助

1.准备jar包,js

maven项目在导入ssm框架的包的时候IDE(eclipse,IDEA...)会自动帮你导入,如果没有请自行导入

和Jquery一样需要引入到你的页面

2.配置springMvc

<!-- 上传文件 -->  
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
    <property name="defaultEncoding" value="utf-8"/>  
    <!-- 最大内存大小 -->  
    <property name="maxInMemorySize" value="10240"/>  
    <!-- 最大文件大小,-1为不限制大小 -->  
    <property name="maxUploadSize" value="-1"/>  
    </bean> 

添加bean到你的spring配置文件中

3.编写图片上传的工具类(你也可直接写到Controller中,但为了方便使用我们把它封装起来)

package com.wz.util;

import java.io.File;
import java.io.IOException;
import java.util.Random;

import javax.servlet.http.HttpSession;

import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

public class UploadImageUtil {
	
	public static String PATH="../../webapps/uploadFiles";//上传的图片存放位置
	String fileName=null; //文件名
	
	public String upload(CommonsMultipartFile file,HttpSession session){
		
		 String curProjectPath = session.getServletContext().getRealPath("/"); 
		 String saveDirectoryPath = curProjectPath + PATH;
		 String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);//获取文件后缀名
		 File saveDirectory = new File(saveDirectoryPath);
		if(!file.isEmpty()){//如果文件不为空
			 fileName = System.currentTimeMillis()+new Random().nextInt(10000)+"_apicture"+"."+suffix; //随机生成一个文件名 
			try {
				FileUtils.copyInputStreamToFile(file.getInputStream(), new File(saveDirectoryPath,fileName));//存入目标路径
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		
		return "../uploadFiles"+"/"+fileName; //返回存入数据库的路径
	}
	
	
	

}

PATH:为你的tomcat存放静态资源路径的位置 一般是你所安装的tomcat目录下webapps文件中,创建uploadFiles文件夹方便管理,当你的项目发布到tomcat上时便可以直接浏览到服务器的静态资源,获取方式如下:


curProjectPath:这是获取到你前台传过来的图片的绝对路径,tomcat会把它放到 X:\apache-tomcat-xx.xx\wtpwebapps\你的项目  目录下(在我的电脑上是如此,如果不同可以自己去把它输出到后台辨别),所以我们通过 ../../ webapps 的path把它放入

webapps中

可自行添加逻辑带码来完成文件类型上传的限制

3.1 controller类

@RequestMapping("add.action")
	@ResponseBody
	public JsonMode addAdmin(@RequestParam("apicture") CommonsMultipartFile file,HttpSession session,HttpServletRequest request,HttpServletResponse response) throws Exception{
		JsonMode jsonMode = new JsonMode();
		upload = new UploadImageUtil();
		
                
                String apicture = upload.upload(file,session); //获取存到数据库的图片路径
		
		int result = adminBiz.addAdmin(apicture);
		System.out.println(result);
		if(result>0){
			jsonMode.setCode(1);
		}else{
			jsonMode.setCode(0);
		}
		
		return jsonMode;
	}

@RequestParam("apicture") CommonsMultipartFile file :获取到前台传来的图片文件流参数,@RequestParam注解内参数要与from表单内<input type="file"> name属性一致

4.发ajax请求

$.ajaxFileUpload({
					url:"../../add.action",
					secureuri:false,
					fileElementId:"admin_add_photo",
					dataType:"json",
					enctype:"multipart/form-data",	
					success:function(data){
						if(data.code==1){
	
							$.messager.show({title:"成功提示",msg:"信息添加成功...",timeout:2000,showType:"slide"});
						}else{
							$.messager.alert("失败提示","信息添加失败...","error");
						}
					},
				});

fileElementId:需要和你的input id一致

需要注意的是:

enctype:"multipart/form-data",

这个属性必须要添加上去,不然spring mvc会拦截你发送的文件流


 那么至此文件便可以成功发送了,如果你想要接收到服务器返回的数据那么你还需要修改一下ajaxFileUpload.js中的uploadHttpData方法,因为它会自动给你返回的json数据加上<pre>标签

修改后的uploadHttpData方法:

 uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" ){
        	 jQuery.globalEval( data );
        }
          
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" ){
        	data = jQuery.parseJSON(jQuery(data).text());
        }
        // evaluate scripts within html
        if ( type == "html" ){
        	jQuery("<div>").html(data).evalScripts();
        }
        
        if(type=="text"){
        	return data;
;
        }
        return data;
    }




O'Reilly的历史和理念

History & Company OverviewBy Tim OReillyIn the BeginningWeve been in business since 1978, originally...
  • jiangtao
  • jiangtao
  • 2004-04-15 19:52:00
  • 3112

ajaxfileupload.js+springMVC实现多个图片与数据同一个ajax方法上传

通过修改原始的ajaxFileUpload.js文件从而实现多图片以及json数据的上传。
  • u010740881
  • u010740881
  • 2017-07-05 11:27:59
  • 516

Spring MVC+ajaxfileupload实现文件上传下载

一、框架相关1、jar包引入 首先引入common-fileupload.jar文件,但是因为common-fileupload是依赖于common-io这个包的 而commons-lang3包含...
  • xiaoshiyiqie
  • xiaoshiyiqie
  • 2016-08-11 15:35:03
  • 3244

springmvc + ajaxfileupload 实现异步上传文件(图片)

最近在做一个项目需要实现异步上传图片,在网上找了很多资料后,采用了ajaxfileupload可以实现,以下是核心代码: jsp: 图片名称: ...
  • zwx19921215
  • zwx19921215
  • 2015-03-08 15:29:24
  • 28808

springmvc图片的本地上传和存放数据库

/** * 图片上传 */ @RequestMapping("/doUploadFile") public ModelAndView doUploadFile(HttpServle...
  • u010163458
  • u010163458
  • 2015-09-10 08:18:12
  • 6026

MVC+ajaxfileupload实现多图片同时上传

  • 2016年05月18日 12:01
  • 6KB
  • 下载

spring mvc 文件、图片上传(极简)ajaxFileUpload

没想到做个图片上传耽误这么长时间,特此整理。 基于springMVC后端框架。 前端使用jQuery插件ajaxFileUpload.js。 参考文章:spring mvc(注解)上传文件的简单例...
  • huobing123456789
  • huobing123456789
  • 2016-02-26 15:36:44
  • 5532

完整SpringMVC上传图片组件及保存图片地址到数据库

在阅读网上众多资源后,发现S
  • Gavin_wangzg
  • Gavin_wangzg
  • 2014-08-13 14:46:44
  • 7712

ajaxfileupload.js+SpringMVC实现文件上传

一、jsp页面 js下载 : http://download.csdn.net/detail/longtingjing/9725858 js引用: ...
  • longtingjing
  • longtingjing
  • 2016-12-30 19:09:27
  • 1261

springmvc和servlet下的文件上传和下载(存文件目录和存数据库Blob两种方式)

项目中涉及了文件的上传和下载,以前在struts2下做过,今天又用springmvc做了一遍,发现springmvc封装的特别好,基本不用几行代码就完成了,下面把代码贴出来: FileUpA...
  • u010802573
  • u010802573
  • 2014-07-10 10:37:26
  • 2952
收藏助手
不良信息举报
您举报文章:Spring MVC + ajaxFileUpload 传图片到tomcat服务器与存路径到数据库
举报原因:
原因补充:

(最多只允许输入30个字)