ajax异步请求上传图片,后台如何使用MultipartFile直接接受,post请求

[啦啦啦灬]

后台只能使用MultipartFile类接收,post请求

[啦啦啦灬]

如何写前端代码 @RequestMapping("user/upload/tuxiang") @ResponseBody public SysResult uploadTuXiang(String account,MultipartFile file,HttpServletRequest request){ try { //PicUploadResult /* * 判断用户是否为空 * 判断账号是否存在 * 判断文件是否图片 * 根据账号获取id * 存入图片路径地址到数据库 */ //PicUploadResult String path=request.getSession().getServletContext().getRealPath("/"); //构造一个返回的空对象 PicUploadResult result = new PicUploadResult(); if(account==null||account.equals("")){ return SysResult.build(201, "用户账号不能为空！"); }else if(!userService.flagAccount(account)){ return SysResult.build(202, "用户账号不存在！"); }else if(file==null||file.equals("")){ return SysResult.build(203, "图片不能为空"); } System.out.println("uploadFile:"+file); //判断后缀,获取原名称,1.jpg String oldFileName = file.getOriginalFilename(); //截取后缀 String extFileName = oldFileName .substring(oldFileName.lastIndexOf(".")); //正则判断合法性 if(extFileName.matches(".^(jpg|png|gif)$")){ return SysResult.build(204, "图片格式输入错误"); //result.setError(1); //return result; } try { //判断木马,BufferedImage判断是否有宽高 BufferedImage bi = ImageIO.read (file.getInputStream()); //getHeight没有抛异常说明数据流中有宽高的属性,不是木马 result.setHeight(bi.getHeight()+""); result.setWidth(bi.getWidth()+""); //以上内容为判断木马过程; //生成路径 images\2018\07\27 String dir = "/images/"+new SimpleDateFormat("yyyy-MM-dd"). format(new Date())+"/"; //拼接磁盘路径,拼接url路径 path=path+dir; String urlPath="http://localhost:8090"+dir; // String urlPath = contexPath+dir; //创建磁盘目录,等待输出文件 File _dir = new File(path); if(!_dir.exists()){ _dir.mkdirs();//tomcat下的webapp/ROOT/images/***/ } //计算文件重命名 String fileName = System.currentTimeMillis() +""+RandomUtils.nextInt(100,999)+extFileName; //result.setUrl(urlPath+fileName); //写出磁盘 file.transferTo(new File(path+fileName)); path=path+fileName; Date updated=new Date(); userService.uploadTuXiang(account,path,updated); //error为0 return SysResult.oK(path); } catch (Exception e) { result.setError(1); return SysResult.build(205, e.toString()); } } catch (Exception e) { return SysResult.build(205, e.toString()); } } /** * 获取用户头像在服务器中的路径地址 * @param account 用户账号 * @return String:头像在服务器中的路径地址 */ @RequestMapping("user/select/tuxiang") @ResponseBody public SysResult selectTuxiang(String account){ /* * 判断账号是否为空 * 判断账号是否存在 * 根据账号获取用户的图像路径地址 */ try { if(account==null||account.equals("")){ return SysResult.build(201, "账号不能为空"); }else if(!userService.flagAccount(account)){ return SysResult.build(202, "账号不存在"); }else { String path=userService.selectTuxiang(account); return SysResult.oK(path); } } catch (Exception e) { return SysResult.build(203, e.toString()); } }

[NANU-NANA]

谢谢分享，记得及时结帖。

[NANU-NANA]

一个简单的例子

 <form action="/user/upload/tuxiang" enctype="multipart/form-data" method="POST"> 
   <input type="file" name="photo" />
   <input type="submit" value="Upload Photo"/>
</form>

[啦啦啦灬]

引用 2 楼 NANU-NANA 的回复:

谢谢分享，记得及时结帖。

我求的是前端代码.后台的代码是我自己写上去的

[啦啦啦灬]

引用 4 楼 NANU-NANA 的回复:

一个简单的例子

 <form action="/user/upload/tuxiang" enctype="multipart/form-data" method="POST"> 
   <input type="file" name="photo" />
   <input type="submit" value="Upload Photo"/>
</form>

有没有用ajax的方法

[散着步的码农]

function ajaxPostImage(url,data,callback) {
    var index;
    $.ajax({
        url:url,
        async: false,
        dataType:"json",
        processData: false,  //tell jQuery not to process the data
        contentType: false,  //tell jQuery not to set contentType
        beforeSend: function () {
            //......
        },
        complete: function(){
            //......
        },
        data:data,
        type:"post",
        success:function(data){
            callback(data);
        },
        error:function(){
            //......
        }
    });
}

[散着步的码农]

var file = document.getElementById('file').files[0];
            var deptId = $("#deptId").val();
            var fd = new FormData();
            fd.append("deptId",deptId);
ajaxPostImage("/xxxxx.do", field, function (res) {
            //......
           
          

[NANU-NANA]

引用 5 楼 啦啦啦灬 的回复:

[quote=引用 4 楼 NANU-NANA 的回复:] 一个简单的例子

 <form action="/user/upload/tuxiang" enctype="multipart/form-data" method="POST"> 
   <input type="file" name="photo" />
   <input type="submit" value="Upload Photo"/>
</form>

有没有用ajax的方法 [/quote] 已经有人回了，我就不写了。