layui图片上传按钮按着没反应_layui上传图片详解（附代码）

最新推荐文章于 2023-09-26 12:36:17 发布

weixin_39972777

最新推荐文章于 2023-09-26 12:36:17 发布

阅读量494

点赞数

文章标签： layui图片上传按钮按着没反应

本文链接：https://blog.csdn.net/weixin_39972777/article/details/111492058

版权

本文介绍了layui图片上传的实现过程，包括前端界面展示、上传逻辑及与后端Controller的交互。通过layui提供的upload模块，无需额外插件即可完成图片上传功能。用户选择图片后，文件上传至服务器并返回json数据，将图片路径填入表单，与其他信息一同提交。示例代码展示了如何处理上传请求，以及上传成功后的效果。

摘要由CSDN通过智能技术生成

layui上传与bootstrap上传相似，只是不需要下插件，

layui自带的已够用先看一下前台界面，这里是用到的上传头像

先点击开始上传，头像上传至服务器中，

返回json添加至form表单中，与其他数据一起提交

先看一下jsp界面

pageEncoding="UTF-8"%>

个人资料

rel="stylesheet" />

layui.use('upload',function(){

var upload = layui.upload;

upload.render({

elem: '#fileBtn'

,url: '../updatePersonalById.do'

,accept: 'file'

,auto: false

,bindAction: '#uploadBtn'

,done: function(res){

alert(res.data.src);

$("[name=userImage]").val(res.data.src);

}

});

编号

登录名

密码

确认密码

真实姓名

电话

地址

头像:

选择文件

开始上传

提交

重置

与Controller交互的.dopackage com.supermanager.controller;

import java.io.File;

import java.io.IOException;

import java.util.Date;

import java.util.List;

import java.util.Random;

import javax.annotation.Resource;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpSession;

import org.springframework.context.annotation.Scope;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.ModelAttribute;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import com.supermanager.entity.LogsInfo;

import com.supermanager.entity.RoleInfo;

import com.supermanager.entity.StoragesInfo;

import com.supermanager.entity.UserInfo;

import com.supermanager.service.LogsService;

import com.supermanager.service.RoleInfoService;

import com.supermanager.service.StoragesService;

import com.supermanager.service.UserInfoService;

import net.sf.json.JSONArray;

@Controller

@Scope("prototype")

public class UserInfoController {

@Resource

private UserInfoService userInfoService;

@Resource

private LogsService logService;

@Resource

private RoleInfoService roleInfoService;

@Resource

private StoragesService storagesService;

/**

* 修改个人资料

* @param session

* @param file

* @param ui

* @return

* @throws IOException

* @throws IllegalStateException

@RequestMapping(value="updatePersonalById")

public @ResponseBody String updatePersonal(@RequestParam("file") MultipartFile file,@ModelAttribute UserInfo ui,HttpServletRequest request) throws IllegalStateException, IOException{

String oldName = file.getOriginalFilename();

String path = request.getServletContext().getRealPath("/upload/");

String fileName = changeName(oldName);

String rappendix = "upload/" + fileName;

fileName = path + "/" + fileName;

File file1 = new File(fileName);

file.transferTo(file1);

String str = "{\"code\": 0,\"msg\": \"\",\"data\": {\"src\":\"" + rappendix + "\"}}";

return str;

}

public static String changeName(String oldName){

Random r = new Random();