首页 > 编程 > Java > 正文

SpringMVC结合ajaxfileupload实现文件无刷新上传代码

2019-11-26 12:33:10
字体:
来源:转载
供稿:网友

jQuery没有提供ajax的文件上传,我们可以通过ajaxfileupload实现ajax文件的上传。其实ajaxfileupload文件上传特别的简单。下面就演示一下在SpringMVC中实现ajax的文件上传。

1、后台接收代码

首先在spring的配置文件中添加文件上传配置  

<!-- 文件上传 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="defaultEncoding" value="UTF-8"/> </bean> 

再写文件接收的代码

package com.chinaunicom.jlmssp.controller;import java.io.File;import java.io.IOException;import java.util.Arrays;import java.util.Date;import java.util.HashMap;import javax.servlet.ServletContext;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import org.apache.commons.fileupload.servlet.ServletFileUpload;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.commons.CommonsMultipartFile;import com.chinaunicom.jlmssp.model.DataResponse;import com.chinaunicom.jlmssp.model.JavaToJsMsg;import com.chinaunicom.jlmssp.model.Org_UserInfo;import com.chinaunicom.jlmssp.model.Repaly_Expert_Home_Page;import com.chinaunicom.jlmssp.services.Replay_ExpertManageService;/** * 项目复制管理子系统 * 专家云管理 * @author SunYue * @version 0.1 */@Controller@RequestMapping("/admin/Replay_ExpertManageController.do")public class Replay_ExpertManageController {    private static final HashMap<String, String> TypeMap = new HashMap<String, String>();  static {    TypeMap.put("image", "gif,jpg,jpeg,png,bmp");    TypeMap.put("flash", "swf,flv");    TypeMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");    TypeMap.put("file", "doc,docx,xls,xlsx,ppt,pptx,htm,html,txt,dwg,pdf");  }  @Autowired  Replay_ExpertManageService replayExpertManageService;        /**     * @author sunyue     * @date 2017年2月28日 下午12:49:33     * @Description: 图片上传方法     * @return message: -1 没有文件上传 0 上传成功 1 上传失败 2 文件超过上传大小 3 文件格式错误 4 上传文件路径非法 5 上传目录没有写权限     * @return void 返回类型     */    @RequestMapping(params = "op=getImageUpload", method = RequestMethod.POST)    public void getImageUpload(@RequestParam("upload") CommonsMultipartFile file,HttpServletRequest request,        HttpServletResponse response) {      if (!file.isEmpty()) {        /*ServletContext servletContext = request.getSession()            .getServletContext();        String uploadPath = servletContext.getRealPath("/")            + "images//replay-expert//";                String upPathString = request.getServletPath(); */                //获取项目工作空间下工程路径的方法,将图片保存到工程路径下        String t=Thread.currentThread().getContextClassLoader().getResource("").getPath();         int num=t.indexOf(".metadata");         String uploadPath=t.substring(1,num).replace('/', '//')+"jl_mssp_V3_0//WebContent//images//replay-expert//";                // 文件上传大小        long fileSize = 3 * 1024 * 1024;        if (file.getSize() > fileSize) {          backInfo(response, false, 2, "");          return;        }        String OriginalFilename = file.getOriginalFilename();        String fileSuffix = OriginalFilename.substring(            OriginalFilename.lastIndexOf(".") + 1).toLowerCase();        if (!Arrays.asList(TypeMap.get("image").split(",")).contains(            fileSuffix)) {          backInfo(response, false, 3, "");          return;        }        if (!ServletFileUpload.isMultipartContent(request)) {          backInfo(response, false, -1, "");          return;        }        // 检查上传文件的目录        File uploadDir = new File(uploadPath);        if (!uploadDir.isDirectory()) {          if (!uploadDir.mkdir()) {            backInfo(response, false, 4, "");            return;          }        }        // 是否有上传的权限        if (!uploadDir.canWrite()) {          backInfo(response, false, 5, "");          return;        }                //新文件名        String newname = "";        /*if(null != filePre){          newname += filePre;//对应模块上传的文件名前缀        }*/                 newname +=  "test1111" + "." + fileSuffix;        File saveFile = new File(uploadPath, newname);        try {          file.transferTo(saveFile);          backInfo(response, true, 0, newname);        } catch (Exception e) {          //LOG.error(e.getMessage(), e);          backInfo(response, false, 1, "");          return;        }      } else {        backInfo(response, false, -1, "");        return;      }    }        // 返回信息    private void backInfo(HttpServletResponse response, boolean flag, int message,        String fileName) {      String json = "";      if (flag) {        json = "{ /"status/": /"success";      } else {        json = "{ /"status/": /"error";      }      json += "/",/"fileName/": /"" + fileName + "/",/"message/": /"" + message + "/"}";      try {        response.setContentType("text/html;charset=utf-8");        response.getWriter().write(json);      } catch (IOException e) {        //LOG.error(e.getMessage(), e);      }    }}

2、前台接受代码

使用ajaxfileupload时,首先下载ajaxfileupload文件,导入对应的js文件   

<script type="text/javascript" src="js/ajaxfileupload.js"></script>

文件传输字段必须为file类型,如下:

<input type="file" id="file" name="file" onchange="ajaxFileUpload();"/>

 其次,处理上传文件:

function ajaxFileUpload() {  $.ajaxFileUpload({    type: "POST",    async: false,    data: { "op": 'getImageUpload'},    url:"Replay_ExpertManageController.do",    dataType: 'json',    secureuri: false,    fileElementId: "upload",    success: function(data, status) {      if (data.status == "success") {        //上传成功        alert("上传照片成功");      }      switch(data.message){       //解析上传状态        case "0" : //上传成功              break;        case "-1" : //上传文件不能为空             break;        default: //上传失败           break;      }      return false;    }/* ,    error : function (jqXHR, textStatus, errorThrown) {      //弹出jqXHR对象的信息      alert(jqXHR.responseText);      //alert(jqXHR.status);      //alert(jqXHR.readyState);      //alert(jqXHR.statusText);        //弹出其他两个参数的信息      //alert(textStatus);      alert(errorThrown);      return false;    } */  });}

三、由于网上的ajaxuploadfile文件都是高版本的,这里将改版完全版文件传上,自己使用

jQuery.extend({  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] );        }  },  createUploadIframe: function(id, uri)  {     var frameId = 'jUploadFrame' + id;        if(window.ActiveXObject) {      if(jQuery.browser.version=="9.0")      {        io = document.createElement('iframe');        io.id = frameId;        io.name = frameId;      }      else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0")      {              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;      },  ajaxUpload:function(s,xml){    //if((fromFiles.nodeType&&!((fileList=fromFiles.files)&&fileList[0].name)))    var uid = new Date().getTime(),idIO='jUploadFrame'+uid,_this=this;    var jIO=$('<iframe name="'+idIO+'" id="'+idIO+'" style="display:none">').appendTo('body');    var jForm=$('<form action="'+s.url+'" target="'+idIO+'" method="post" enctype="multipart/form-data"></form>').appendTo('body');    var oldElement = $('#'+s.fileElementId);    var newElement = $(oldElement).clone();    $(oldElement).attr('id', 'jUploadFile'+uid);    $(oldElement).before(newElement);    $(oldElement).appendTo(jForm);    this.remove=function()    {      if(_this!==null)      {        jNewFile.before(jOldFile).remove();        jIO.remove();jForm.remove();        _this=null;      }    }    this.onLoad=function(){          var data=$(jIO[0].contentWindow.document.body).text();          try{        if(data!=undefined){          data = eval('(' + data + ')');          try {                        if (s.success)              s.success(data, status);              // Fire the global callback            if(s.global)              jQuery.event.trigger("ajaxSuccess", [xml, s]);            if (s.complete)              s.complete(data, status);            xml = null;           } catch(e)             {                      status = "error";            jQuery.handleError(s, xml, status, e);           }           // The request was completed           if(s.global)             jQuery.event.trigger( "ajaxComplete", [xml, s] );           // Handle the global AJAX counter           if (s.global && ! --jQuery.active )             jQuery.event.trigger("ajaxStop");           // Process result           }     }catch(ex){       alert(ex.message);     };    }    this.start=function(){jForm.submit();jIO.load(_this.onLoad);};    return this;       },  createUploadForm: function(id, url,fileElementId, data)  {    //create form      var formId = 'jUploadForm' + id;    var fileId = 'jUploadFile' + id;    var form = jQuery('<form action="'+url+'" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');      if(data)    {      for(var i in data)      {        jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(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      // Create the request object    var xml = {};    s = jQuery.extend({}, jQuery.ajaxSettings, s);    if(window.ActiveXObject){      var upload = new jQuery.ajaxUpload(s,xml);      upload.start();         }else{    var id = new Date().getTime();    var form = jQuery.createUploadForm(id,s.url, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));    var io = jQuery.createUploadIframe(id, s.secureuri);    var frameId = 'jUploadFrame' + id;    var formId = 'jUploadForm' + id;        // Watch for a new set of requests    if ( s.global && ! jQuery.active++ )    {      jQuery.event.trigger( "ajaxStart" );    }          var requestDone = false;      if ( s.global )      jQuery.event.trigger("ajaxSend", [xml, s]);    // Wait for a response to come back    var uploadCallback = function(isTimeout)    {            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 a local callback was specified, fire it and pass it the data                  if (s.success)              s.success(data, status);              // Fire the global callback            if(s.global)              jQuery.event.trigger("ajaxSuccess", [xml, s]);            if (s.complete)              s.complete(data, status);                      } else            jQuery.handleError(s, xml, status);        } catch(e)        {          status = "error";          jQuery.handleError(s, xml, status, e);        }        // The request was completed        if(s.global)          jQuery.event.trigger( "ajaxComplete", [xml, s] );        // Handle the global AJAX counter        if (s.global && ! --jQuery.active )          jQuery.event.trigger("ajaxStop");        // Process result        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(){        // Check to see if the request is still happening        if( !requestDone ) 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)          {            jQuery(form).attr('encoding', 'multipart/form-data');                   }          else          {              jQuery(form).attr('enctype', 'multipart/form-data');                }                           jQuery(form).submit();            } catch(e)        {            jQuery.handleError(s, xml, null, e);        }                jQuery('#'+ frameId).load(uploadCallback);        return {abort: function () {}};       }  },  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" ){       eval( "data = " + $(data).html() );    }    // evaluate scripts within html    if ( type == "html" )      jQuery("<div>").html(data).evalScripts();     return data;  }});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表