最近在开发一个可以上传图片到服务器的web表面页面,下面给大家分享需求和实现思路还有ajax源码,对ajax感兴趣的的朋友参考下Ajax配合Spring实现文件上传功能哦!
由于项目需要,开发一个可以上传图片到服务器的web表单页面。
一、 需求
Web表单页面,可以通过表单上传图片以及其他文字信息。
二、 图片上传的流程
之前没有做过这类页面,通过查询资料。发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下,服务器向前台返回图片的存储路径;之后,前台将图片存储路径以及其他表单信息一起提交到服务器,所有的表单信息存储在数据库中。
三、 方法
由于项目需要,我这里介绍两种图片上传方法,第一种是使用ajax对一个图片直接上传;第二种是先在前台将图片切割为较小的文件,之后使用ajax分别上传图片到服务器,服务器实现对文件的拼接。(方法二适合较大文件的上传)下面我分别对两种方法做介绍。
方法一: 直接上传
1 html页面
(2)之后调用ajaxfileupload.js库,编写图片上传脚本,这里命名为ajaxfileuplaod_implement.js
输出现问题,在web.xml中做如下配置:</p>
<p></p><pre name="code" class="html"><?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<servlet>
<servlet-name>viewspace</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>viewspace</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 支持传输中文字符 -->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app></pre><p></p>
<p><br>
</p>
接下来是重点,在Controller中,使用如下方式接受前台穿回来的文件。<br>
其中需要注意的是,如果前端html的input标签中使用了multiple属性,则表示标签支持上传多个图片,则controller的参数列表中,文件的类型使用MultipartFile[],反之,如果没有使用multiple属性,表示上传的是一张图片,则controller使用MultipartFile类型接收。
输出“存储成功”的提示信息,修改后的名称用于给hiden标签复制,hiden标签的内容会在之后随表单中其他信息一起提交到服务端,通过hiden标签,我们就可以知道与表单关联的图片被存储在什么地方。<br>
<br>
<p></p>
<p>最后,图片上传完成后还需要提交表单,这里使用SpringMVC实现一个表单接收功能。这里名为address的参数,存储的就是图片的存储路径。</p>
<p></p><pre name="code" class="java"> @RequestMapping(value="/form")
public String submitForm(HttpServletRequest request){
String sid = request.getParameter("name");
String address = request.getParameter("address");
if(sid != null && submiter != null && faultTime != null && message != null && address != null){
if(formDataSaveService.saveForm(sid, submiter, message, address, faultTime)){
return "ac";
}
}
return "error";
}</pre><br>
方法二 前台切割上传(留着后面补充)<p></p>
以上所述是小编给大家介绍的Ajax配合Spring实现文件上传功能代码,希望对大家有所帮助!!、
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com