Java 前端使用Ajax通过FormData传递文件和表单数据到后台
感谢小*王的帖子，这个问题困惑我2天了，也询问了有经验的同事不能解决 https://blog.csdn.net/qq_37686250/article/details/97272127?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
-
我同事小姜写的代码--可以使用
1.1 jsp
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>文件上传</legend>
</fieldset>
<form class="layui-form upload" action="" method="post" enctype="multipart/form-data" id="uploadForm">
<div class="layui-form-item">
<div class="layui-input-block">
<input type="radio" id="number" name="number" value="1" title="单个文件上传" checked="true" lay-filter="number">
<input type="radio" id="number" name=number value="2" title="批量上传" lay-filter="number">
</div>
</div>
<div class="layui-form-item" id="model1">
<label class="layui-form-label" style="width:150px">单个文件上传:</label>
<div class="layui-inline">
<input type="file" name="file" class="layui-input" id="file"/>
<input id="fileName" type="text" value="" class="layui-input" placeholder="点击选择文件" readonly style="width:500px"/>
</div>
<div class="layui-inline">
<button id="button1" type="button" class="layui-btn layui-btn-primary" >
</div>
</div>
<div class="layui-form-item" id="model2">
<label class="layui-form-label" style="width:150px">多个文件批量上传:</label>
<div class="layui-inline" >
<input type="file" name="file" multiple="multiple" class="layui-input" id="files"/>
<input id="filesName" type="text" value="" class="replyFileid layui-input" placeholder="点击选择文件" readonly style="width:500px" />
</div>
<div class="layui-inline">
<button id="button2" type="button" class="layui-btn layui-btn-primary" >
</div>
</div>
<div id="load"></div>
</form>
1.2 对应的js
//单个文件上传
function uploadFile() {
var formData = new FormData($('#uploadForm')[0]);
alert(formData)
if($("#fileName").val() == "" ) {
return false;
} else {
$.ajax({
type : 'POST',
url : basePath + 'upload2hdfs.do',
data : formData,
cache : false,
async : true,
processData : false,
contentType : false,
beforeSend:function (xhr){
/* var html = '<img src="loading.gif" />';//“加载中”主题的动图
$("#load").html(html); // 数据加载成功之前，使用loading组件
*/ $('#button1').hide()
},
}).success(function(data) {
if(data=="ok"){
alert("上传成功!")
} else {
alert("上传失败!")
}
$("#load").html("");
$('#button1').show();
location.reload();
}).error(function() {
alert("上传失败!");
$("#load").html("");
$('#button1').show();
location.reload();
});
}
}
//单个文件上传，使用input框联动的方式替换传统的type=file
function getName() {
$("#file").trigger("click");
$("#file").change(function() {
var index = $(this).val().lastIndexOf("\\");
var sFileName = $(this).val().substr((index+1));
$("#fileName").val(sFileName);
});
}
1.3 对应的controller文件
/**
* 向hdfs上传单个文件
* 姚荣辉 20200813
* @param file
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "upload2hdfs.do", method = {RequestMethod.POST, RequestMethod.GET})
@ResponseBody
public String upload2hdfs(@RequestParam("file") MultipartFile file, HttpServletRequest request,HttpServletResponse response) throws Exception {
HDFSClientUtil hdfsClient = new HDFSClientUtil();
InputStream in = file.getInputStream();
//上传文件到/input/upload/下
//String tempPathString = "/input/upload/";
String tempPathString = "/tmp/picHbase/";
//文件名
String name = file.getOriginalFilename();
String flag = "";
if(!name.equals("")) {
//上传完成后的路径
String cloudPath = tempPathString + name;
try {
hdfsClient.uploadFile(in, cloudPath);
flag = "ok";
} catch (Exception e) {
System.out.println("上传失败");
flag = "fail";
}
}
in.close();
//保存文件到指定文件夹
saveImageAsOtherDir(file);
return flag;
}
/***
* 20200817 姚荣辉 向指定的编译环境path文件夹保存图片文件
* @param file
* @param filename
* @throws Exception
*/
public void saveImageAsOtherDir(MultipartFile file) throws Exception {
File f = null;
if(file.equals("")||file.getSize()<=0){
file = null;
}else{
InputStream ins = file.getInputStream();
String path = new RootPath().getWebRootPath();
//下面的是linux的写法
//f=new File("\\Pro_jsp\\src\\com\\bigdata\\log\\img\\1.png");
//下面的是windows中获取的路径，需要指定d:\是哪个盘符
//f=new File("d:\\1.png"); copy成功
//文件名
String filename = file.getOriginalFilename();
//获取文件的扩展名
int i = filename.lastIndexOf(".");
String extName = filename.substring(i);
//为了防止文件名重复，对文件名生成一个uuid
String uuid = UUID.randomUUID().toString().replace("-", "");
//文件编译以后的path，放在webRoot下面 D:\Tomcat8.0-dashuju\webapps\Pro_jsp\comm\img\ahphj9871023iuoiausdf0871234.png
String tgt_file = path + "\\comm\\img\\" + uuid + extName;
//构造目标文件
f=new File(tgt_file);
try {
//构造目标文件流对象
FileOutputStream os = new FileOutputStream(f,true);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
}
os.close();
ins.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
2。我在知识元窗口属性窗口使用的技术
2.1 jsp
<!-- 20200817 姚荣辉 增加选择、保存图标文件到 /GISDSS_BD2/WebRoot/comm/knowledge/attribute_icon目录下的功能 -->
<div class="layui-form-item">
<form class="layui-form upload" action="" method="post" enctype="multipart/form-data" id="uploadForm">
<label class="layui-form-label">选择图标文件:</label>
<div class="layui-inline">
<input type="file" name="file" class="layui-input" id="file"/>
<input id="fileName" type="text" value="" class="layui-input" placeholder="点击选择文件" readonly style="width:500px"/>
</div>
</form>
</div>
2.2 js部分
//选择单个图片文件，使用input框联动的方式替换传统的type=file
function getName() {
$("#file").trigger("click");
$("#file").change(function() {
var index = $(this).val().lastIndexOf("\\");
var sFileName = $(this).val().substr((index+1));
$("#fileName").val(sFileName);
});
}
//20200817 图片文件上传到path + "\\comm\\knowledge\\attribute_icon\\"
//如果图片文件不为空,则处理
if($("#fileName").val() != "") {
//var formData = new FormData($('#uploadForm')[0]);
var file = $("#file")[0].files[0];
//打印file 为对象
var formObj = new FormData();
formObj.set('file', file);
$.ajax({
type : 'POST',
url : '<%=basePath %>/uploadPicToPath.do',
data : formObj,
cache : false,
async : true,
processData : false,
contentType : false,
beforeSend:function (data){
/* var html = '<img src="loading.gif" />';//“加载中”主题的动图
$("#load").html(html); // 数据加载成功之前，使用loading组件
*/ //$('#button1').hide()
},
})
}
2.3 controller部分
/**
* 向指定的位置上传图片文件
* 姚荣辉 20200817
* @param file
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/uploadPicToPath.do", method = {RequestMethod.POST, RequestMethod.GET})
@ResponseBody
public void uploadPicToPath(@RequestParam("file") MultipartFile file, HttpServletRequest request,HttpServletResponse response) throws Exception {
File f = null;
if(file.equals("")||file.getSize()<=0){
file = null;
}else{
InputStream ins = file.getInputStream();
//下面的是linux的写法
//f=new File("\\Pro_jsp\\src\\com\\bigdata\\log\\img\\1.png");
//下面的是windows中获取的路径，需要指定d:\是哪个盘符
//f=new File("d:\\1.png"); copy成功
//文件名
String filename = file.getOriginalFilename();
//文件编译以后的path，放在webRoot下面 D:\Tomcat8.0-dashuju\webapps\Pro_jsp\comm\img\ahphj9871023iuoiausdf0871234.png
String tgt_file = get_tgt_fileName(filename);
//构造目标文件
f=new File(tgt_file);
try {
//构造目标文件流对象
FileOutputStream os = new FileOutputStream(f,true);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
}
os.close();
ins.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
/**
* 把给定的原始文件名处理成最终的目标保存路径和文件名
*
* @param src_filename 原始问价名 e.g.202008170001.png
* @return D:\\Tomcat8.0-dashuju\\webapps\\GISDSS_DB2\\comm\\knowledge\\attribute_icon\\uuidabcdefg12323.png
*/
private String get_tgt_fileName(String src_filename){
//获取当前系统tomcat编译路径
String path = new RootPath().getWebRootPath();
//获取文件的扩展名
int i = src_filename.lastIndexOf(".");
String extName = src_filename.substring(i);
//为了防止文件名重复，对文件名生成一个uuid
String uuid = UUID.randomUUID().toString().replace("-", "");
//文件编译以后的path，放在webRoot下面 D:\Tomcat8.0-dashuju\webapps\Pro_jsp\comm\img\ahphj9871023iuoiausdf0871234.png
String tgt_file = path + "\\comm\\knowledge\\attribute_icon\\" + uuid + extName;
return tgt_file;
}
3. 参考 小*王的微博内容
<form id="testform" method="post" >
<input type="text" id="name" name="name" />
<input type="text" name="age" />
<input type="text" name="hobby" />
<input type="file" id="image" name="image" />
<input id="yxrq" name="birthday" class="easyui-datebox" data-options="editable:false,width:200" />
</form>
<button id="tijiao" οnclick="tijiao()">提交</button>
1，当仅仅想上传文件到后台
function tijiao(){
var file = $("#image")[0].files[0];
//打印file 为对象
console.log(file);
var formObj = new FormData();
formObj.set('image', file);
$.ajax({
url:'test/test3',
data:formObj,
type: 'POST',
dataType:'json',
processData:false,
contentType:false,
success:function(data){
alert(data.Msg);
}
});
}
@RequestMapping("/test3")
public Map<String,Object> test3( @RequestParam("image") MultipartFile uploadFile)
2.上传表单数据和文件
var uploadFile = new FormData($("#testform")[0]);
console.log(uploadFile);
$.ajax({
url:"test/test3",
type:"post",
data:uploadFile,
cache: false,
dataType:'json',
contentType: false, //不设置内容类型
processData: false, //不处理数据
success:function(data){
alert(data.Msg);
}
});
@RequestMapping("/test3")
public Map<String,Object> test3(Test test3, @RequestParam("image") MultipartFile uploadFile)//Test为实体类
3.上传多个表单数据，那么以json形式上传。
function tijiao(){
var file = $("#image")[0].files[0];
//打印file 为对象
console.log(file);
var formObj = new FormData();
formObj.set('image', file);
var formStr = JSON.stringify($('#testform').serializeJSON());
formObj.set('test3', formStr);
console.log(formObj);
$.ajax({
url:"test/test3",
type:"post",
data:formObj,
cache: false,
dataType:'json',
contentType: false, //不设置内容类型
processData: false, //不处理数据
success:function(data){
alert(data.Msg);
}
});
}
@RequestMapping("/test3")
public Map<String,Object> test3(String test3, @RequestParam("image") MultipartFile uploadFile)
2.上传表单数据和文件
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/450962/viewspace-2712771/ ，如需转载，请注明出处，否则将追究法律责任。
