版权声明：转载请注明出处！！谢谢！！ https://blog.csdn.net/weixin_43474398/article/details/90769130
废话不多说。上代码。jar包也给你们搞来了。。
后端java代码
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.util.Map;
import java.util.UUID;
@Configuration
@Controller
public class FileController implements WebMvcConfigurer {
@PostMapping("/addparent")
@ResponseBody
public String upFile(@RequestParam("file") MultipartFile file, Map map) {
String path = "D:/devsoft1/img/";
String fileName = file.getOriginalFilename();
String suffixName=fileName.substring(fileName.lastIndexOf("."));
fileName= UUID.randomUUID()+suffixName;
System.out.println(fileName);
System.out.println("type::" + suffixName);
System.out.println("filename::" + fileName);
File targetFile = new File(path);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
File saveFile = new File(targetFile, fileName);
try {
file.transferTo(saveFile);
System.out.println("执行成功");
String path1 = path + fileName;
System.out.println(path1);
// return "success";
} catch (Exception e) {
e.printStackTrace();
System.out.println("执行失败");
return "failed";
}
map.put("img",fileName);
System.out.println("11111");
return "success";
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/devsoft1/**").addResourceLocations("file:D:/devsoft1/");
}
}
前端html页面。别忘了引入js文件
function upImg() {
var fileObj = document.getElementById("file").files[0];
var FileController = "/addparent";
if(!fileObj.type.match('image.*')){
alert("请选择正确的图片");
}else{
var form = new FormData();
form.append("file",fileObj);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(this.readyState == 4 && this.status == 200){
var b = this.responseText;
if(b == "success"&&(fileObj.type.match('image.*'))){
alert("上传成功！");
}
}
};
xhr.open("post", FileController, true);
xhr.send(form);
}
};
function updateGuardian(){
var imageurl=$('#file').val();
alert(imageurl);
var guname=$('#guname').val();
var birth=$('#birth').val();
var sex=$('#sex').val();
var gunative=$('#gunative').val();
var card=$('#card').val();
var typecode=$('#typecode').val();
var record=$('#record').val();
var phone=$('#phone').val();
var residence=$('#residence').val();
var address=$('#address').val();
var work=$('#work').val();
var job=$('#job').val();
if(guname!=""){
$.ajax({
type: "POST",
dataType: "json",
url: "/stuguardian?stucode="+stucode+"&gucode"+gucode+"&imageurl="+imageurl+"&guname="+guname+"&birth="+birth+
"&sex="+sex+ "&gunative="+gunative+"&card="+card+"&typecode="+typecode+"&record="+record+"&record="+record+
"&phone="+phone+"&residence="+residence+"&address="+address+ "&work="+work+"&job="+job ,
contentType: "application/json",
success: function (data) {
if(data["code"]=="1"){
alert("修改成功")
window.location.reload();
}else{
alert("修改失败")
}
},
error : function() {
alert("异常！");
}
});
}else{
alert("姓名未填写");
return false;
}
};
</script>
html文件
<div class="wrap">
<!-- header -->
<div th:replace="commons/bat::topbar2('档案管理')"></div>
<!-- content -->
<div class="content">
<!-- content-main -->
<div id="main">
<form method="post" th:action="@{'/guardian/'+${studentmap.stucode}}" enctype="multipart/form-data" >
<div class="main-head">
<div class="main-head-left"><span>基础信息</span></div>
<div class="main-head-right main-head-margin"><button class="btn btn-color" onclick="updateGuardian()"><i class="fa fa-hourglass-half" aria-hidden="true"></i>  保存</button></div>
</div>
<p class="clear"></p>
<hr>
<div class="info-left" id="camera">
<input id="file" type="file" style="display:none" name="file" onchange="upImg()">
<img src="../asserts/images/uploadimg.png" alt="上传照片" id="img" onclick="file.click()">
</div>
<div class="info-right">
<div class="main-info">
<div class="short"><span>姓名：</span><input type="text" name="guname" id="guname" class="input_first" ></div>
<div class="left short"><span>性别：</span><input type="text" name="sex" id="sex" class="input_first" ></div>
<div class="left short"><span>生日：</span><input type="text" name="birth" id="birth" class="input_first" ></div>
</div>
<p class="clear"></p>
<div class="main-info">
<div class="short"><span>籍贯：</span><input type="text" name="gunative" id="gunative" class="input_first" ></div>
<div class="left middle"><span>身份证号：</span><input type="text" name="card" id="card" class="input_first" ></div>
</div>
<p class="clear"></p>
<div class="main-info">
<div class="short"><span>关系：</span>
<select type="text" name="typecode" id="typecode" class="input_first" style="width:75%;">
<option value="" selected="selected">请选择监护关系</option>
<option th:each="rtype:${rtypes}" th:value="${rtype.tcode}" th:text="${rtype.tcodename}" ></option>
</select>
</div>
<div class="left short"><span>学历：</span><input type="text" name="record" id="record" class="input_first" ></div>
<div class="left short"><span>手机：</span><input type="text" name="phone" id="phone" class="input_first" ></div>
</div>
<div class="main-info long"><span>户籍所在地：</span><input type="text" name="residence" id="residence" class="input_first" ></div>
<div class="main-info long"><span class="address">常住地址：</span><input type="text" name="address" id="address" class="input_first" ></div>
</div>
<p class="clear"></p>
<div class="info-middle">
<div class="left"><span>工作单位：</span><input type="text" name="work" id="work" class="input_first" ></div>
<div class="left"><span>从事职业：</span><input type="text" name="job" id="job" class="input_first" ></div>
</div>
<p class="clear"></p>
<div class="jianhu">
<div class="left">
<span>小明的父亲-系统关联信息</span>
</div>
</div>
<p class="clear"></p>
<hr>
<div class="main-table">
<div class="left"><span>绑定账号：</span><input type="text" class="input_two" name="username"></div>
<div class="left kaoqin"><span>考  勤  卡：</span><input type="text" input_two name="crcode"></div>
</div>
<p class="clear"></p>
<div class="explain">
</div>
</form>
</div>
</div>
博主水平有限。。不足之处请指证。。