Ajax配合Spring實(shí)現(xiàn)文件上傳功能代碼

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屬性必須設(shè)置為“multipart/form-data”，在Html5中，如果需要多張圖片一起上傳，可以在input type="file"> 標(biāo)簽中，增加multiple屬性，例如：input type="file" id= “fileImage” multiple />。br> 
br> 
br> 
p>/p> 
p>2 js/p> 
p>（1）js使用ajax提供的ajaxfileupload.js庫。這個(gè)庫使用起來還是比較方便的，和普通的ajax函數(shù)使用方法幾乎相同。首先，需要ajaxfileupload.js庫文件。這里需要注意，我之前在網(wǎng)上下載了一個(gè)ajaxfileupload.js文件不能用，浪費(fèi)了很長(zhǎng)時(shí)間，我直接把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> 

p>/p>pre name="code" class="javascript">function fileUpload() {  
  var inputObject = $("#fileImage").get(0); 
  if(inputObject.value == "") 
  { 
    alert("清先選擇需要上傳的圖片"); 
    return false; 
  } 
  $.ajaxFileUpload({  
    url: '/PicSubmit/pic', //服務(wù)器端請(qǐng)求地址  
    secureuri: false, //是否需要安全協(xié)議，一般設(shè)置為false  
    type: 'post', 
    fileElementId: 'fileImage', //文件上傳域的ID  
    dataType: 'text', //返回值類型 一般設(shè)置為json  
    enctype:'multipart/form-data',//注意一定要有該參數(shù)  
    success: function (data, status) //服務(wù)器成功響應(yīng)處理函數(shù)  
    {  
      data=decodeURI(data);//服務(wù)器端使用urlencode將中文字符編碼，所以這里需要解碼。這樣做的目的是防止中文亂碼 
      var address = JSON.parse(data); 
      for(var i=0;iaddress.length;i++){ 
        ajaxfile_onSuccess(address[i]); //這里的success回調(diào)函數(shù)可以自己定義，但是有一點(diǎn)需要注意，就是需要把服務(wù)器返回來的圖片存儲(chǔ)路徑寫入/pre>pre name="code" class="javascript">span style="white-space:pre">              /span>//hiden標(biāo)簽的value值中，方法見下面的writeHide函數(shù) 
      } 
    },  
    complete: function(xmlHttpRequest)  
    {span style="white-space:pre"> /span>//這里將html中的文件上傳標(biāo)簽替換為新的標(biāo)簽，是應(yīng)為我在開發(fā)過程中發(fā)現(xiàn)，當(dāng)ajax執(zhí)行一次上傳操作之后，再使用file標(biāo)簽選擇文件時(shí)，標(biāo)簽沒有反應(yīng)，/pre>pre name="code" class="javascript">span style="white-space:pre">   /span>//所以暫時(shí)使用了這種方法。 
      inputObject.replaceWith('input type="file" id="fileImage" name="fileImage" />'); 
    }, 
    error: function (data, status, e)//服務(wù)器響應(yīng)失敗處理函數(shù) 
    {  
      //alert("無法連接到服務(wù)器"); 
    }  
  })  
}/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>完成上面兩個(gè)部分之后，前臺(tái)的主要工作基本就結(jié)束了。我后臺(tái)使用了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"> 
  !-- 靜態(tài)資源 --> 
  mvc:resources mapping="/js/**" location="/js/" /> 
  mvc:resources mapping="/css/**" location="/css/" /> 
  mvc:resources mapping="/image/**" location="/image/" /> 
  !-- 掃描web包，應(yīng)用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"/> 
      !-- 默認(rèn)編碼 --> 
      property name="defaultEncoding" value="UTF-8" /> 
      !-- 上傳文件的解析 --> 
      property name="resolveLazily" value="true" /> 
  /bean> 
  !-- SpringMVC在超出上傳文件限制時(shí),會(huì)拋出org.springframework.web.multipart.MaxUploadSizeExceededException --> 
   !-- 該異常是SpringMVC在檢查上傳的文件信息時(shí)拋出來的,而且此時(shí)還沒有進(jìn)入到Controller方法中 --> 
   bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver" > 
     property name="exceptionMappings"> 
       props> 
         !-- 遇到MaxUploadSizeExceededException異常時(shí),自動(dòng)跳轉(zhuǎn)到/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”的配置是必須的，否則后臺(tái)無法收到前臺(tái)傳來的文件。p>/p> 
p>br> 
/p> 
p>為了防止文件名中的中文字符傳輸出現(xiàn)問題，在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> 

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> 

p>br> 
/p>p>文件接收完成后，就可以對(duì)文件進(jìn)行存儲(chǔ)了，方法有很多，我這里舉一個(gè)例子如下：/p> 
p>/p>pre name="code" class="java">  public String savePic(MultipartFile[] fileImage){ 
    //為圖片改名 
    String oldName = ""; 
    String newName = ""; 
    String extension = ""; 
    //圖片按照上傳時(shí)間命名 
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS"); 
    //存儲(chǔ)每張圖片的信息 
    ListPicConfirmData> resultList = new ArrayListPicConfirmData>(); 
    //獲取配置文件中圖片的存儲(chǔ)路徑 
    String path = Parameters.getInstance().getDatabaseProps().getProperty("pic_save_dir"); 
    //依次將圖片存儲(chǔ)到path路徑下 
    for(int i=0;ifileImage.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(); 
        } 
      //記錄圖片存儲(chǔ)信息 
      PicConfirmData pic = null; 
      try { 
        //只存名稱，路徑已知，從而節(jié)省數(shù)據(jù)庫空間 
        //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>這里將接收到的圖片的原始名稱以及修改后存儲(chǔ)使用的名稱返回給前臺(tái)，原始名稱用于在前臺(tái)頁面輸出“存儲(chǔ)成功”的提示信息，修改后的名稱用于給hiden標(biāo)簽復(fù)制，hiden標(biāo)簽的內(nèi)容會(huì)在之后隨表單中其他信息一起提交到服務(wù)端，通過hiden標(biāo)簽，我們就可以知道與表單關(guān)聯(lián)的圖片被存儲(chǔ)在什么地方。br> 
br> 
p>/p> 
p>最后，圖片上傳完成后還需要提交表單，這里使用SpringMVC實(shí)現(xiàn)一個(gè)表單接收功能。這里名為address的參數(shù)，存儲(chǔ)的就是圖片的存儲(chǔ)路徑。/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>br> 
/p> 
link rel="stylesheet" > 
           /pre>