Ajax配合Spring实现文件上传功能代码教程

由于项目需要,开发一个可以上传图片到服务器的web表单页面。

一、 需求

Web表单页面,可以通过表单上传图片以及其他文字信息。

二、 图片上传的流程

之前没有做过这类页面,通过查询资料。发现比较常见的做法,是先将图片上传到服务器端的某个文件目录下,服务器向前台返回图片的存储路径;之后,前台将图片存储路径以及其他表单信息一起提交到服务器,所有的表单信息存储在数据库中。

三、 方法

由于项目需要,我这里介绍两种图片上传方法,第一种是使用ajax对一个图片直接上传;第二种是先在前台将图片切割为较小的文件,之后使用ajax分别上传图片到服务器,服务器实现对文件的拼接。(方法二适合较大文件的上传)下面我分别对两种方法做介绍。

方法一: 直接上传

1 html页面

  <pre name="code" class="html"><!DOCTYPE html>   <head></head>   <body>   <form id="uploadForm" action="/PicSubmit/form" method="post" enctype="multipart/form-data" onsubmit="return submit_check()" class="bootstrap-frm" ></pre><pre name="code" class="html"><input id = "sid" type = "text" name="name" /></pre><pre name="code" class="html"><pre name="code" class="html"><input id = "fileImage" type = "file" name="filename" /></pre><pre name="code" class="html"><input id = "addressid" type = "hidden" name="address" /></pre><pre name="code" class="html"><input id="ajaxsub" type="button" class="button" value="上传图片" onclick="fileUpload()<span style="font-family: Arial, Helvetica, sans-serif;">" /> </span></pre><pre name="code" class="html"><input type="submit" class="button" value="提交表单" />   <input type="reset" class="button" value="重置表单" />   </pre></body></html><p></p>   <pre></pre>   <br>   <pre></pre>   这一部分需要注意的是,form表单的enctype属性必须设置为“multipart/form-data”,在Html5中,如果需要多张图片一起上传,可以在<input type="file"> 标签中,增加multiple属性,例如:<input type="file" id= “fileImage” multiple />。<br>   <br>   <br>   <p></p>   <p>2 js</p>   <p>(1)js使用ajax提供的ajaxfileupload.js库。这个库使用起来还是比较方便的,和普通的ajax函数使用方法几乎相同。首先,需要ajaxfileupload.js库文件。这里需要注意,我之前在网上下载了一个ajaxfileupload.js文件不能用,浪费了很长时间,我直接把js库文件粘贴到这里,方便分享。</p>   <p></p><pre name="code" class="javascript">// JavaScript Document</pre><pre name="code" class="javascript">// ajax file uplaod   jQuery.extend({     createUploadIframe: function(id, uri)     {       //create frame       var frameId = 'jUploadFrame' + id;       if(window.ActiveXObject) {         var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');         if(typeof uri== 'boolean'){           io.src = 'javascript:false';         }         else if(typeof uri== 'string'){           io.src = uri;         }       }       else {         var io = document.createElement('iframe');         io.id = frameId;         io.name = frameId;       }       io.style.position = 'absolute';       io.style.top = '-1000px';       io.style.left = '-1000px';       document.body.appendChild(io);       return io;     },     createUploadForm: function(id, fileElementId)     {       //create form       var formId = 'jUploadForm' + id;       var fileId = 'jUploadFile' + id;       var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');       var oldElement = jQuery('#' + fileElementId);       var newElement = jQuery(oldElement).clone();       jQuery(oldElement).attr('id', fileId);       jQuery(oldElement).before(newElement);       jQuery(oldElement).appendTo(form);       //set attributes       jQuery(form).css('position', 'absolute');       jQuery(form).css('top', '-1200px');       jQuery(form).css('left', '-1200px');       jQuery(form).appendTo('body');       return form;     },     ajaxFileUpload: function(s) {       // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        s = jQuery.extend({}, jQuery.ajaxSettings, s);       var id = s.fileElementId;       var form = jQuery.createUploadForm(id, s.fileElementId);       var io = jQuery.createUploadIframe(id, s.secureuri);       var frameId = 'jUploadFrame' + id;       var formId = 'jUploadForm' + id;       if( s.global && ! jQuery.active++ )       {         // Watch for a new set of requests         jQuery.event.trigger( "ajaxStart" );       }       var requestDone = false;       // Create the request object       var xml = {};       if( s.global )       {         jQuery.event.trigger("ajaxSend", [xml, s]);       }       var uploadCallback = function(isTimeout)       {         // Wait for a response to come back         var io = document.getElementById(frameId);         try         {           if(io.contentWindow)           {             xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;             xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;           }else if(io.contentDocument)           {             xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;             xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;           }         }catch(e)         {           jQuery.handleError(s, xml, null, e);         }         if( xml || isTimeout == "timeout")         {           requestDone = true;           var status;           try {             status = isTimeout != "timeout" ? "success" : "error";             // Make sure that the request was successful or notmodified             if( status != "error" )             {               // process the data (runs the xml through httpData regardless of callback)               var data = jQuery.uploadHttpData( xml, s.dataType );               if( s.success )               {                 // ifa local callback was specified, fire it and pass it the data                 s.success( data, status );               };               if( s.global )               {                 // Fire the global callback                 jQuery.event.trigger( "ajaxSuccess", [xml, s] );               };             } else             {               jQuery.handleError(s, xml, status);             }           } catch(e)           {             status = "error";             jQuery.handleError(s, xml, status, e);           };           if( s.global )           {             // The request was completed             jQuery.event.trigger( "ajaxComplete", [xml, s] );           };           // Handle the global AJAX counter           if(s.global && ! --jQuery.active)           {             jQuery.event.trigger("ajaxStop");           };           if(s.complete)           {             s.complete(xml, status);           } ;           jQuery(io).unbind();           setTimeout(function()           { try           {             jQuery(io).remove();             jQuery(form).remove();           } catch(e)           {             jQuery.handleError(s, xml, null, e);           }           }, 100);           xml = null;         };       }       // Timeout checker       if( s.timeout > 0 )       {         setTimeout(function(){           if( !requestDone )           {             // Check to see ifthe request is still happening             uploadCallback( "timeout" );           }         }, s.timeout);       }       try       {         var form = jQuery('#' + formId);         jQuery(form).attr('action', s.url);         jQuery(form).attr('method', 'POST');         jQuery(form).attr('target', frameId);         if(form.encoding)         {           form.encoding = 'multipart/form-data';         }         else         {           form.enctype = 'multipart/form-data';         }         jQuery(form).submit();       } catch(e)       {         jQuery.handleError(s, xml, null, e);       }       if(window.attachEvent){         document.getElementById(frameId).attachEvent('onload', uploadCallback);       }       else{         document.getElementById(frameId).addEventListener('load', uploadCallback, false);       }       return {abort: function () {}};     },     uploadHttpData: function( r, type ) {       var data = !type;       data = type == "xml" || data ? r.responseXML : r.responseText;       // ifthe type is "script", eval it in global context       if( type == "script" )       {         jQuery.globalEval( data );       }       // Get the JavaScript object, ifJSON is used.       if( type == "json" )       {         eval( "data = " + data );       }       // evaluate scripts within html       if( type == "html" )       {         jQuery("<div>").html(data).evalScripts();       }       return data;     },     handleError: function( s, xhr, status, e )   {       // If a local callback was specified, fire it        if ( s.error ) {         s.error.call( s.context || s, xhr, status, e );       }       // Fire the global callback       if ( s.global ) {         (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );       }     }   });</pre><p></p>   <p><br>   </p>

(2)之后调用ajaxfileupload.js库,编写图片上传脚本,这里命名为ajaxfileuplaod_implement.js 

  <p></p><pre name="code" class="javascript">function fileUpload() {      var inputObject = $("#fileImage").get(0);     if(inputObject.value == "")     {       alert("清先选择需要上传的图片");       return false;     }     $.ajaxFileUpload({        url: '/PicSubmit/pic', //服务器端请求地址        secureuri: false, //是否需要安全协议,一般设置为false        type: 'post',       fileElementId: 'fileImage', //文件上传域的ID        dataType: 'text', //返回值类型 一般设置为json        enctype:'multipart/form-data',//注意一定要有该参数        success: function (data, status) //服务器成功响应处理函数        {          data=decodeURI(data);//服务器端使用urlencode将中文字符编码,所以这里需要解码。这样做的目的是防止中文乱码         var address = JSON.parse(data);         for(var i=0;i<address.length;i++){           ajaxfile_onSuccess(address[i]); //这里的success回调函数可以自己定义,但是有一点需要注意,就是需要把服务器返回来的图片存储路径写入</pre><pre name="code" class="javascript"><span style="white-space:pre">              </span>//hiden标签的value值中,方法见下面的writeHide函数         }       },        complete: function(xmlHttpRequest)        {<span style="white-space:pre"> </span>//这里将html中的文件上传标签替换为新的标签,是应为我在开发过程中发现,当ajax执行一次上传操作之后,再使用file标签选择文件时,标签没有反应,</pre><pre name="code" class="javascript"><span style="white-space:pre">   </span>//所以暂时使用了这种方法。         inputObject.replaceWith('<input type="file" id="fileImage" name="fileImage" />');       },       error: function (data, status, e)//服务器响应失败处理函数       {          //alert("无法连接到服务器");       }      })    }</pre><pre name="code" class="javascript"></pre><pre name="code" class="javascript">function writeHide(data){   <span style="white-space:pre"> </span>if($("#addressid").get(0).value == "")   <span style="white-space:pre"> </span>{   <span style="white-space:pre">   </span>$("#addressid").get(0).value = data.newName;   <span style="white-space:pre"> </span>}   <span style="white-space:pre"> </span>else   <span style="white-space:pre"> </span>{   <span style="white-space:pre">   </span>$("#addressid").get(0).value = $("#addressid").get(0).value+","+data.newName;   <span style="white-space:pre"> </span>}   }   </pre><p></p>   <p>3 spring.</p>   <p>完成上面两个部分之后,前台的主要工作基本就结束了。我后台使用了spring框架。</p>   <p>首先是springMVC的配置文件:viewspace-servlet.xml</p>   <p></p><pre name="code" class="html"><?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/mvc        http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd       http://www.springframework.org/schema/context        http://www.springframework.org/schema/context/spring-context-3.1.xsd">     <!-- 静态资源 -->     <mvc:resources mapping="/js/**" location="/js/" />     <mvc:resources mapping="/css/**" location="/css/" />     <mvc:resources mapping="/image/**" location="/image/" />     <!-- 扫描web包,应用Spring的注解 -->     <context:component-scan base-package="web"/>     <bean id="defaultAnnotationHandlerMapping"        class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />     <bean id="annotationMethodHandlerAdapter"        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />     <!-- 配置视图解析器,将ModelAndView及字符串解析为具体的页面 -->     <bean         class="org.springframework.web.servlet.view.InternalResourceViewResolver"         p:viewClass="org.springframework.web.servlet.view.JstlView"         p:prefix="/WEB-INF/jsp/"         p:suffix=".jsp"/>      <!-- 使springMVC支持图片上传 -->      <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">          <!-- 最大上传尺寸1MB -->         <property name="maxUploadSize" value="10485760"/>         <!-- 默认编码 -->         <property name="defaultEncoding" value="UTF-8" />         <!-- 上传文件的解析 -->         <property name="resolveLazily" value="true" />     </bean>     <!-- SpringMVC在超出上传文件限制时,会抛出org.springframework.web.multipart.MaxUploadSizeExceededException -->      <!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的,而且此时还没有进入到Controller方法中 -->      <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver" >        <property name="exceptionMappings">          <props>            <!-- 遇到MaxUploadSizeExceededException异常时,自动跳转到/WEB-INF/jsp/error_toobig.jsp页面 -->            <prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error_fileupload</prop>         </props>       </property>      </bean>   </beans></pre>其中,类“org.springframework.web.multipart.commons.CommonsMultipartResolver”的配置是必须的,否则后台无法收到前台传来的文件。<p></p>   <p><br>   </p>   <p>为了防止文件名中的中文字符传输出现问题,在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>

  <pre name="code" class="java"> @RequestMapping(value="/pic")     @ResponseBody     public String submitPic(@RequestParam(value = "filename",required = false) MultipartFile[] fileImage,          HttpServletRequest request){       if(fileImage == null){         return "[]";       }       return picSaveService.savePic(fileImage);     }</pre><br>

其中需要注意的是,如果前端html的input标签中使用了multiple属性,则表示标签支持上传多个图片,则controller的参数列表中,文件的类型使用MultipartFile[],反之,如果没有使用multiple属性,表示上传的是一张图片,则controller使用MultipartFile类型接收。

  <p><br>   </p><p>文件接收完成后,就可以对文件进行存储了,方法有很多,我这里举一个例子如下:</p>   <p></p><pre name="code" class="java">  public String savePic(MultipartFile[] fileImage){       //为图片改名       String oldName = "";       String newName = "";       String extension = "";       //图片按照上传时间命名       SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");       //存储每张图片的信息       List<PicConfirmData> resultList = new ArrayList<PicConfirmData>();       //获取配置文件中图片的存储路径       String path = Parameters.getInstance().getDatabaseProps().getProperty("pic_save_dir");       //依次将图片存储到path路径下       for(int i=0;i<fileImage.length;i++){         System.out.println(fileImage[i].getOriginalFilename());         oldName = fileImage[i].getOriginalFilename();             extension = oldName.substring(oldName.lastIndexOf("."));         newName = sdf.format(new Date())+extension;         File target = new File(path,newName);         if(!target.exists()){           target.mkdirs();         }         try {             fileImage[i].transferTo(target);           } catch (IllegalStateException e) {             e.printStackTrace();           } catch (IOException e) {             e.printStackTrace();           }         //记录图片存储信息         PicConfirmData pic = null;         try {           //只存名称,路径已知,从而节省数据库空间           //pic = new PicConfirmData(URLEncoder.encode(oldName, "utf-8"), path+newName);           pic = new PicConfirmData(1,URLEncoder.encode(oldName, "utf-8"), newName);           resultList.add(pic);         } catch (UnsupportedEncodingException e) {           e.printStackTrace();         }       }       return ToolJson.getJsonFromPicConfirmData(resultList);     }</pre>这里将接收到的图片的原始名称以及修改后存储使用的名称返回给前台,原始名称用于在前台页面输出“存储成功”的提示信息,修改后的名称用于给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> 

  <p><br>   </p>   <link rel="stylesheet" href="http://static./public/res-min/markdown_views.css?v=1.0">              </pre>
(0)

相关推荐

  • JavaEE项目中文件上传功能如何实现?

    文件上传是一个很基础的功能,j2ee怎么实现呢.这里使用struts1的方式实现 操作方法 01 我们新建一个jsp页面,在页面中加入我们需要用到的html标签 02 然后在页面中使用<html ...

  • nginx安装文件上传ngx_upload模块教程

    ngx_upload模块是nginx中一个文件上传模式了,下面我们来看看nginx安装文件上传ngx_upload模块步骤,希望例子对各位有帮助. 安装nginx,并加入nginx upload mo ...

  • 石墨文档怎么上传 石墨文档文件上传步骤详细教程

    石墨文档是一款轻便.简洁的在线协作文档工具,作为共同写在云上的文档,公开上传后就能多人同时对文档编辑和评论,下面就跟小编一起来了解具体操作吧! 上传方法: 1.想上传自己文档的小伙伴,可以先通过桌面找 ...

  • FineReport怎么制作文件上传功能?

    FineReport可以制作文件上传功能,只需要使用自带的控件就可以实现,文件类型有txt.pdf.jpg.png.gif.doc.xls和ppt等.还可以限制上传文件大小,可以是多文件上传,也支持单 ...

  • spring boot 图片上传与显示功能实例详解

    首先描述一下问题,spring boot 使用的是内嵌的tomcat, 所以不清楚文件上传到哪里去了, 而且spring boot 把静态的文件全部在启动的时候都会加载到classpath的目录下的, ...

  • 和彩云网盘软件的允许4g网络上传功能如何打开

    和彩云网盘是一款云盘软件,我们可以在软件中上传我们的文件,接下来小编就教大家怎么开启软件中的允许4g上传的功能.具体如下:1. 首先我们打开手机进入桌面,然后点击打开和彩云网盘软件. 2. 进入到软件 ...

  • 百度云网盘极速上传功能如何开启

    云网盘提供了极速上传功能,但是该功能必须得先开启才能享受极速上传的乐趣.极速上传,就是利用其它网盘所提供的相同内容,实现远程文件的转移操作,因此上传速度极快.下面小编就与大家一起分享一下开启极速上传的 ...

  • win远程管理之文件上传下载(Putty)

    win远程管理之文件上传下载(Putty) PuTTy 的功能,而是通过其完整安装包内的 psftp.exe 文件实现的。所以,要完成这些操作, Windows 内必须有完整的 PuTTy 安装包而不 ...

  • 文件上的图标是什么意思,如何反映工作状态?

    文件上的图标分为两种:同步成功、正在同步。 如果文件上没有图标表示该文件由于网络或其他原因,暂时未进入同步状态,当网络恢复时Q盘会自动尝试同步。 鼠标浮在托盘图标上会看见Q盘当前的工作状态,当Q盘文件 ...