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

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();

Date d = new Date();

String newName = oldName.substring(oldName.indexOf('.'));

newName = r.nextInt(99999999) + d.getTime() + newName;

return newName;

}

@RequestMapping(value="updatePersonalByIdSuccess")

public String updatePersonalByIdSuccess(@ModelAttribute UserInfo ui){

UserInfo uif = userInfoService.FindUserByUserId(ui.getUserId());

ui.setRoleId(uif.getRoleId());

ui.setUserSex(uif.getUserSex());

ui.setUserAge(uif.getUserAge());

int a = userInfoService.Update(ui);

if(a!=0){

return "redirect:exitSystem.do";

}

return "error";

}

}

上传成功之后的效果如图

更多layui相关文章请关注layui使用教程栏目。