easyui+jquery+jsp无法上传图片。
jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/green/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/farm.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/farm/imgPosition.css">
<script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/easyui/plugins/jquery.edatagrid.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/easyui/plugins/jquery.draggable.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="<%=basePath%>ext/farm/helper.js"></script>
<title>用户管理</title>
</head>
<body>
<div id="formContainer" class="easyui-dialog" data-options="title:'',closable:true,draggable:false,resizable:false,width:974,height:450,padding:'10px 10px'" buttons="#formButtons">
<div style="margin-top: 5px;margin-left: 5px;">
<span>用户名:</span>
<input id="Search" class="easyui-textbox" panelHeight="auto" data-options="editable:true, valueField:'code', textField:'caption'">
<a href="#" class="easyui-linkbutton c1" iconCls="icon-search" onclick ="doSearch()">查询</a>
<a href="#" class="easyui-linkbutton c2" iconCls="icon-add" onclick ="javascript:grid.edatagrid('addRow')">添加</a>
<a href="#" class="easyui-linkbutton c3" iconCls="icon-remove" onclick ="javascript:grid.edatagrid('cancelRow')">取消</a>
<a href="#" class="easyui-linkbutton c5" iconCls="icon-cancel" onclick ="javascript:grid.edatagrid('destroyRow')">删除</a>
</div>
<table id="grid"></table>
<div id="formButtons"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick ="javascript:$('#formContainer').dialog('close')">关闭窗口</a></div>
</div>
<div id="formUploadContainer" class="easyui-dialog" style="width:400px;height:130px;" closed="true" buttons="#formUploadButtons">
<form id="formUploadFile" method="post" <%-- action="<%=basePath%>file/saveHeadImg" --%> enctype="multipart/form-data">
图像文件：<input id="uploadFile" class="easyui-filebox" style="width:290px;" buttonText="选择文件">
<div id="formUploadButtons">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" id="uploadButton" onclick="uploadPhoto(1)">开始上传</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick ="javascript:$('#formUploadContainer').dialog('close')">关闭窗口</a>
</div>
</form>
</div>
<script>
var params = {
id: '',
mode: 'insert'
};
var grid;
$(document).ready(function() {
//配置表格
grid = $('#grid').edatagrid({
title: '用户清单',
width: 960,
height: 360,
method: 'post',
url: '<%=basePath%>/userManager/gridData',
saveUrl: '<%=basePath%>/userManager/save',
updateUrl: '<%=basePath%>/userManager/save',
destroyUrl: '<%=basePath%>/userManager/delete',
border: false,
rownumbers: true,
remoteSort: true,
nowrap: false,
singleSelect: true,
fitColumns: true,
pagination: true,
striped: true,
autoSave: true,
idField: "id",
onSave: function(rowIndex, rowData) {
$.messager.show({
title: "消息",
msg: '保存成功',
});
},
columns: [
[{
field: 'id',
title: 'ID',
width: 70,
sortable: true,
align: 'center',
halign: 'center'
}, {
field: 'photo',
title: '头像',
width: 100,
align: 'center',
halign: 'center',
formatter: function(value, row) {
if (value == null) value = "none.png";
return '<img src="<%=basePath%>images/headImages/' + value + '" width="100px">';
},
}, {
field: 'username',
title: '用户名',
width: 100,
align: 'center',
sortable: true,
halign: 'center',
editor: {
type: 'validatebox',
options: {
validType: 'length[1,10]',
invalidMessage: '有效长度1-10',
required: true
}
}
}, {
field: 'nickname',
title: '昵称',
width: 100,
align: 'center',
sortable: true,
halign: 'center',
editor: {
type: 'validatebox',
options: {
validType: 'length[1,10]',
invalidMessage: '有效长度1-10',
required: true
}
}
}, {
field: 'exp',
title: '经验值',
width: 80,
align: 'center',
halign: 'center',
formatter: function(value, row) {
return '<img src="">'+Number(value);
},
}, {
field: 'points',
title: '积分',
width: 80,
align: 'center',
halign: 'center',
formatter: function(value, row) {
return '<img src="">'+Number(value);
},
}, {
field: 'coin',
title: '金币',
width: 80,
align: 'center',
halign: 'center',
formatter: function(value, row) {
return '<img src="">'+Number(value);
},
}, {
field: 'op',
title: '操作',
width: 160,
align: 'center',
halign: 'center',
formatter: function(value,row) {
let rowIndex=grid.edatagrid("getRowIndex",row);
let button="<input onclick ='uploadPhotoByUsername("+rowIndex+")' type='button' value='上传头像'> <input onclick ='saveForm("+rowIndex+")' type='button' value='保存数据'>";
return button;
}
}]
],
pageSize: 5,
pageList: [5, 10, 15, 20],
destroyMsg: {
norecord: {
title: '警告',
msg: '首先需要选中记录，然后在点击删除按钮'
},
confirm: {
title: '确认',
msg: '是否删除选中记录?'
}
},
onSuccess: function(index, result) {
console.log(result);
$("#msgBox").text(result.msg);
},
onDestroy: function(index, result) {
console.log(result);
$("#msgBox").text(result.msg);
}
});
grid.datagrid("getPager").pagination({
pageSize: 5,
pageList: [5, 10, 15, 20]
});
});
function uploadPhotoByUsername(rowIndex) {
var rows = grid.datagrid("getRows");//拿到选中的记录
var row=rows[rowIndex];
var username=row.username;
console.log("username="+username);
console.log(typeof username);
$('#formUploadContainer').dialog('open').dialog('setTitle', '');
$('#formUpload').form('load', row);
}
function uploadPhoto(rowIndex){
var file = $("#uploadFile")[0]; // 获取文件对象
if (!file) {
$.messager.alert('提示', '请选择一个文件！');
return;
}
var formData = new FormData(); // 创建FormData实例
formData.append('file', file); // 添加文件到formData
// 可以从当前行获取额外数据，例如用户ID
/* var row = grid.datagrid("getRows")[rowIndex];
if (row) {
formData.append('userId', row.id); // 假设需要用户ID
} */
// 调用getRemoteData发送请求
getRemoteData("<%=basePath%>/file/saveHeadImg", formData, function(data) {
console.log("Upload response:", data);
if (data.success) {
// 处理成功逻辑，比如更新UI
$.messager.show({
title: "成功",
msg: "头像上传成功！"
});
} else {
// 处理失败逻辑
$.messager.show({
title: "错误",
msg: "头像上传失败：" + data.message
});
}
});
}
function doSearch() {
var newUrl = "<%=basePath%>/userManager/gridData2"; // 新的资源路径
grid.datagrid({
url: newUrl // 动态设置新的URL
});
grid.datagrid("load", {
name: $("#Search").val()
});
}
function saveForm(rowIndex) {
grid.form('submit', {
url: '<%=basePath%>/userManager/save',
onSubmit: function(param) {
//param.id = params.id;
//param.mode = params.mode;
return $(this).form('validate');
},
success: function(result) {
var result = eval('(' + result + ')');
if (result.code == 0) {
grid.datagrid('reload');
}
$.messager.show({
title: "消息",
msg: result.msg
});
}
});
}
</script>
</body>
</html>
相关工具helper.js:
function getRemoteData(url,callBack){
return request({},"post",url,callBack);
}
function fromCode2Caption(code, arrayList) {
var items = $(arrayList);
for(var index = 0;index<items.length;index++){
if(items[index].code==code){
return items[index].caption;
}
}
return "";
}
function request(object,method,methodURL,successFunction){
$.ajax({
cache: true,
type: method,
datatype:"json",
contentType: "application/json",
url:methodURL,
data:JSON.stringify(object),
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status+"\r\n"+XMLHttpRequest.readyState+"\r\n"+textStatus);
},
success: successFunction
});
}
后端FileController:
import javax.servlet.http.HttpServletRequest;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
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 cn.jxufe.bean.Message;
import cn.jxufe.utils.FileSaver;
@Controller
@RequestMapping("file")
public class FileController {
private FileSaver fileSaver;
@RequestMapping(value = "saveHeadImg", produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public Message saveHeadImg(HttpServletRequest request,@RequestParam("file") MultipartFile uploadFile) {
return fileSaver.save("images/headImages/", request, uploadFile);
}
}
后端FileSaver:
import java.io.File;
import javax.servlet.http.HttpServletRequest;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import cn.jxufe.bean.Message;
public class FileSaver {
public Message save(String url,HttpServletRequest request,MultipartFile uploadFile) {
Message message = new Message();
try {
//创建一个通用的多部分解析器.
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//设置编码
commonsMultipartResolver.setDefaultEncoding("utf-8");
//判断 request 是否有文件上传,即多部分请求...
if (commonsMultipartResolver.isMultipart(request)){
//转换成多部分request
MultipartHttpServletRequest multipartRequest = commonsMultipartResolver.resolveMultipart(request);
// file 是指 文件上传标签的 name=值
// 根据 name 获取上传的文件...
MultipartFile file = multipartRequest.getFile(uploadFile.getOriginalFilename());
//上传后记录的文件...
File imageFile = new File(url);
//上传...
file.transferTo(imageFile);
}
message.setCode(0);
message.setMsg("上传成功");
} catch (Exception e) {
message.setCode(-10);
message.setMsg("上传失败");
}
return message;
}
}
