layui图片上传代码

最新推荐文章于 2025-06-02 17:15:33 发布

逐梦s

最新推荐文章于 2025-06-02 17:15:33 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： java layui 文章标签：图片上传

sdream

本文链接：https://blog.youkuaiyun.com/qq_28449663/article/details/80169403

java 同时被 2 个专栏收录

8 篇文章

订阅专栏

layui

2 篇文章

订阅专栏

这是一个使用layui框架实现图片上传的示例代码。通过Controller处理文件上传请求，利用UploadUtil工具类将文件保存到指定路径，并返回上传结果。前端页面使用layui的上传组件，展示上传的图片并提供上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package com.ncwu.controller;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.ncwu.util.UploadUtil;

@Controller
public class Fileupload {
//上传图片
@RequestMapping(value ="/upload",method=RequestMethod.POST)
public @ResponseBody Map<String, Object> image(@RequestBody MultipartFile file,HttpServletRequest request){

Map<String, Object> map = new HashMap<String, Object>();
try {
String name = file.getOriginalFilename();//上传文件的真实名称
String suffixName = name.substring(name.lastIndexOf(".")+1);//获取后缀名
//图片的存储位置
String path = request.getSession().getServletContext().getRealPath("\\upload\\"+suffixName+"\\");
String image = UploadUtil.uploadFile(file, path);

map.put("code", 0);
map.put("message", "上传成功");
map.put("data", image);
} catch (Exception e) {
map.put("code", 1);
e.printStackTrace();
}
System.out.println(map);
return map;
}

}

package com.ncwu.util;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

import org.springframework.web.multipart.MultipartFile;

public class UploadUtil {

public static String uploadFile(MultipartFile file,String path) throws IOException {
String name = file.getOriginalFilename();//上传文件的真实名称
String suffixName = name.substring(name.lastIndexOf("."));//获取后缀名
// String hash = Integer.toHexString(new Random().nextInt());//自定义随机数（字母加数字）
String hash = UUID.randomUUID().toString();
String fileName = hash + suffixName;
File tempFile = new File(path, fileName);
if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdirs();
}
if (tempFile.exists()) {
tempFile.delete();
}
tempFile.createNewFile();
file.transferTo(tempFile);
return tempFile.getName();
}

}

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">

</head>
<body>

<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" height="300px" width="180px">
<p id="demoText"></p>
</div>
</div>

<script src="layui/layui.js" charset="utf-8"></script>

<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;

//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,method: 'POST'
,url: '/jzfw/upload/'
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>

</body>
</html>