springMVC使用ajaxFailUpload上传图片的方法

1.在jsp页面<head>标签内引入script文件（注意顺序）

  <script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="resources/js/ajaxFileUpload.js"></script>

2.springMVC.xml配置文件中（必须进行配置）

 <!--使用springMVC上传图片 ajaxFileUpload-->
  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="10485760" />
  </bean>

3.<input>标签(id属性,<script>中 ajaxFileUpload的fileElementId会用到)

 <input type="file" id="headImg" name="headImg"/>

4.在<script>标签中，我将ajaxFileUpload写在一个函数里，在需要用到上传图片的位置，调用该函数

function headImgUpload(){ //图片上传函数
  var results = "";
  var account = $("#account").val(); //account、identity 这两个变量，根据我的需求会在后面用到，阅读者可以根据自己的需求删掉或者修改这两个变量
  var identity = $("input[name='identity']:checked").val();
  $.ajaxFileUpload({
    url:"register/headImgUpload?account="+account+"&identity="+identity,//根据url访问controller层中的方法
    secureuri:false,
    fileElementId:"headImg", //<input>标签中的id属性
    type:"POST",
    dataType:"text", //服务器返回的数据类型
    success:function (result) {
      result = result.replace(/<pre.*?>/g, ''); //ajaxFileUpload会对服务器响应回来的text内容加上<pre style="....">text</pre>前后缀
      result = result.replace(/<PRE.*?>/g, '');
      result = result.replace("<PRE>", '');
      result = result.replace("</PRE>", '');
      result = result.replace("<pre>", '');
      result = result.replace("</pre>", '');
      result = JSON.parse(result);//转换为json格式
      results = result.result;
      alert(result);
    },
    error:function (data,status,error) {
      alert("失败！！！"+error);
    }
  });
}

5.controller层

@Controller
@RequestMapping(value = "register")
public class RegisterController {
  //用户头像上传
  @RequestMapping(value = "/headImgUpload",method = RequestMethod.POST)
  @ResponseBody
  public Map<String,Object> headImgUpload(@RequestParam MultipartFile headImg, String account, String identity, HttpServletRequest request){
    //上传的结果
    String result = "fail";
    //头像上传到的位置
    String imgRealPath = "";
    try{
      //确保上传的图片不为空
      if(headImg != null && !headImg.isEmpty()){
        //判断注册用户的身份，商户还是会员
        if(identity.equals("member")){
          //会员
          imgRealPath = request.getSession().getServletContext().getRealPath("/resources/image/member");
        }else if(identity.equals("businessman")){
          //商户
          imgRealPath = request.getSession().getServletContext().getRealPath("/resources/image/businessman");
        }
        System.out.println(imgRealPath);//在控制台打印一下路径
        //上传完成后保存的文件名
        String fileName= account + ".jpg";
        //文件夹不存在的话，新建一个
        File fileFolder = new File(imgRealPath);
        if(!fileFolder.exists()){
          fileFolder.mkdirs();
        }
        File file = new File(fileFolder,fileName);
        //transferTo(),springMVC的方法，用于图片上传时，将内存中的图片写入磁盘
        headImg.transferTo(file);//会报IO异常
        result = "success";
      }
    }catch (IOException e){
      e.printStackTrace();
    }
    Map<String,Object> resultMap = new HashMap<String,Object>();
    resultMap.put("result",result);
    return resultMap;
  }
}

总结

以上所述是小编给大家介绍的springMVC使用ajaxFailUpload上传图片，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Springmvc完成ajax功能实例详解

    1.加入jackson的jar包 2.在响应的方法上加上@ResponseBody:把java对象转化为json对象 3.方法的返回值可以是对象集合字符串 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $.post("ajax/Ajax1&quo

  • springmvc+ajax+formdata上传图片代码实例

    最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下.上传文件的方式有多种,这里对使用FormData的方式进行说明. 1.springmvc项目想要上传文件,需要使用multipart方式,所以在spring-mvc.xml配置文件中需要增加multipart相关配置,代码如下 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultip

  • SpringMVC+Jquery实现Ajax功能

    一.什么是Ajax? Ajax:异步的JavaScript和Json(这里XML改为了Json): 作用:用于完成网页局部刷新功能(修改少量数据只用局部刷新,不用再整个网页重新加载): 二.SpringMVC和Jquery的简单介绍 SpringMVC:是基于Spring的一个子框架(MVC框架),功能强于Spring,这个框架主要是解决咱们Controller这一层的问题. M:model-模型User V:view-视图jsp C:Controller-控制器servlet jQuery框架

  • 利用SpringMVC和Ajax实现文件上传功能

    个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml

  • 解决SpringMVC接收不到ajaxPOST参数的问题

    问题 今天遇到一个问题,代码如下 java: @PostMapping(value = "/method") @ResponseBody public Object method(Integer id,String audit_content) { return null; } js: var data = {id:7,audit_content:"11111111111111111111a1"}; $.ajax({ type: "POST",

  • springMVC使用ajaxFailUpload上传图片的方法

    1.在jsp页面<head>标签内引入script文件(注意顺序) <script type="text/javascript" src="resources/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="resources/js/ajaxFileUpload.js"></scri

  • BootStrap使用file-input插件上传图片的方法

    BootStrap使用file-input插件上传图片的方法

    最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法 首先根据自己的项目路径引入插件css和js文件 注意locale语言文件在fileinput.min.js文件之后引入 <!-- file input --> <link href="../../css/fileinput.min.css"

  • Angular下H5上传图片的方法（可多张上传）

    最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码 angular.module('myApp') .directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $tim

  • Springmvc ajax跨域请求处理方法实例详解

    上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha

  • springmvc fastjson 反序列化时间格式化方法(推荐)

    第一种情况是从后台拿到数据,进行反序列化,反序列化格式时间:试了一下很多网上的方法,最后发现还是在实体类上面的日期字段加上如下注解,可以完成格式化操作,否则默认就都是时间戳的格式: @JSONField (format="yyyy-MM-dd HH:mm:ss")  public Date birthday; @JSONField (format="yyyy-MM-dd HH:mm:ss")  public Date birthday; 第二种情况是:respons

  • springmvc之获取参数的方法(必看)

    springmvc之获取参数的方法(必看)

    1.导包,四大核心包,一个切面包(AOP),logging,web,springmvc 2.配置文件,核心代码如下: web.xml <servlet> <servlet-name>springDispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param

  • js验证上传图片的方法

    本文实例讲述了js验证上传图片的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • asp.net基于Web Service实现远程上传图片的方法

    本文实例讲述了asp.net基于Web Service实现远程上传图片的方法.分享给大家供大家参考,具体如下: 页面调用代码: 前提添加Web 引用 HttpFileCollection files = HttpContext.Current.Request.Files; string filePath = files[0].FileName; string fileName = filePath.Substring(filePath.LastIndexOf("//") + 1); b

  • php+html5使用FormData对象提交表单及上传图片的方法

    php+html5使用FormData对象提交表单及上传图片的方法

    本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量. 使用FormData对象 1.创建一个FormData空对象,然后使用append方法添加key/value 复制代码 代码如下: var formdata = new

  • php简单实现批量上传图片的方法

    本文实例讲述了php简单实现批量上传图片的方法.分享给大家供大家参考,具体如下: <?php function upload_multi($path,$photo,$i){ $uploaddir = './'.$path;//文件存放目录 if(!file_exists($uploaddir))//如果目录不存在就新建 $uploaddir=mkdir($uploaddir); $piece = explode('.',$photo['name'][$i]); $uploadfile = $up

随机推荐