SpringMVC+Ajax异步上传图片并显示(源码)

来源：互联网发布：java 微信授权登录编辑：程序博客网时间：2024/05/16 07:49

效果演示：

图片已上传到服务器：

说明：

点击浏览按钮，选择图片后，图片通过ajax访问Controller，将图片保存，并将图片显示出来

项目结构：

核心代码：（需搭建springMVC框架，完整jar包和配置文件可以下载文章最后源码！！！）

1.在WebContent下新建js文件夹，放入ajaxfileupload.js和jquery-3.2.1.min.js

导入jar包搭建SpringMVC，配置web.xml

2.在spring-controller.xml中配置：

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xsi:schemaLocation="http://www.springframework.org/schema/beans                          http://www.springframework.org/schema/beans/spring-beans-3.1.xsd                          http://www.springframework.org/schema/context                          http://www.springframework.org/schema/context/spring-context-3.1.xsd                          http://www.springframework.org/schema/mvc                          http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"><!-- 自动扫描该包 --><mvc:annotation-driven /><!-- 配置控制器的包 --><context:component-scan base-package="com.controller" /><!-- 视图解析器 --><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><!-- 变成一个 可用的url地址 --><property name="prefix" value="WEB-INF/jsp/" /><property name="suffix" value=".jsp" /></bean><!-- 上传文件 --><bean id="multipartResolver"class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="utf-8" /><property name="maxInMemorySize" value="10240" /><property name="maxUploadSize" value="-1" /></bean></beans>

3.jsp页面配置

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!doctype html><html><head><meta charset="utf-8"><title>photo</title><script src="js/jquery-3.2.1.min.js" type="text/javascript"></script><script src="js/ajaxfileupload.js" type="text/javascript"></script><style>#photo {width: 300px;height: 400px;text-align: center;margin: 0 auto;border: 1px solid #000;}</style></head><body><center><h3>图片上传</h3></center><hr /><form name="form1" method="post" action=""enctype="multipart/form-data"><table width="373" height="634" border="1" align="center"cellpadding="0" cellspacing="0"><tr><td height="458" align="center"><div id="photo"></div></td></tr><tr><td height="174" align="center" bgcolor="#99FFFF"><inputtype="file" name="upfile" id="upfilePhotoId" onchange="upfilePhoto();"required="required" /></td></tr></table></form><hr><a href="upfile.do">访问action</a><script type="text/javascript" charset="UTF-8">function upfilePhoto() {$.ajaxFileUpload({url : "upfile.do",secureuri : false,fileElementId : "upfilePhotoId",dataType : 'text',success : function(data) {$("#photo").html("<img  width='300px' height='400px' src='"+data+"'/>");},error : function(XMLHttpRequest, textStatus,errorThrown) {alert('上传失败！');}});};</script></body></html>

4.Controller配置：

package com.controller;import java.io.File;import java.io.IOException;import javax.servlet.http.HttpSession;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;@Controllerpublic class UpFileController {@RequestMapping(value = "/upfile.do")@ResponseBodypublic String upfile(MultipartFile upfile, HttpSession session) {/* * 测试信息 */System.out.println("upfile执行了...");System.out.println(upfile.getContentType());System.out.println(upfile.getOriginalFilename());// 获取上传的文件名String fileName = upfile.getOriginalFilename();String root_path = session.getServletContext().getRealPath("cache");// 获取自定义缓存文件夹路径File file = new File(root_path);// 如果文件夹不存在，则创建if (!file.exists()) {file.mkdirs();}// 构建图片url路径，为显示图片做准备String url_root = session.getServletContext().getContextPath();String file_url = url_root + "/cache/" + fileName;try {File file2 = new File(file, upfile.getOriginalFilename());upfile.transferTo(file2);// 将上传的文件移动到指定文件夹} catch (IllegalStateException e) {// TODO Auto-generated catch blocke.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}return file_url;// 返回图片url给ajax}}

JavaWeb开发环境下载地址：

点击打开链接

源码下载：

源码中含有ssm项目所有jar包，运行环境为Eclipse JavaEE版，服务器为TomCat7.0

微信扫码关注回复1123立刻获取下载地址，非常感谢您的支持~

CSDN下载地址:

点击打开链接

阅读全文

1 0