layui怎么实现图片上传
这篇文章将为大家详细讲解有关layui实现图片上传的方法,文章内容质量较高,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司-专业网站定制、快速模板网站建设、高性价比宝丰网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式宝丰网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖宝丰地区。费用合理售后完善,十载实体公司更值得信赖。
layui上传与bootstrap上传相似,只是不需要下插件,
layui自带的已够用 先看一下前台界面,这里是用到的上传头像
先点击开始上传,头像上传至服务器中,
返回json添加至form表单中,与其他数据一起提交
先看一下jsp界面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>个人资料
与Controller交互的.do
package 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怎么实现图片上传
标题URL:http://myzitong.com/article/jjpgjd.html