一、后端接收图片代码
@Controller
@RequestMapping(value = "/io", produces = MediaType.APPLICATION_JSON_VALUE)
public class IoController {
/**
* 上传文件通用接口
*
* @param file
* 文件
* @param request
* @return
* @throws IllegalStateException
* @throws IOException
*/
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
@ResponseStatus(HttpStatus.CREATED)
@ResponseBody
public BaseVO uploadFile(MultipartFile file,String remark,HttpServletRequest request)
throws IllegalStateException, IOException {
//绝对根路径
String realPath=request.getServletContext().getRealPath("/");
System.out.println(realPath);
if (file != null) {
// 保存文件
String myFileName = file.getOriginalFilename();
// 如果名称不为“”,说明该文件存在,否则说明该文件不存在
if (myFileName.trim() != "") {
// 重命名上传后的文件名
String fileName = file.getOriginalFilename();
// 定义上传路径
String relativePath="uploads"+File.separator+DateUtils.getYMD();
File pathFile = new File(realPath+relativePath);
if (!pathFile.exists()) {
pathFile.mkdirs();
}
String path = pathFile +File.separator+ fileName;
File localFile = new File(path);
file.transferTo(localFile);
return BaseVO.getSuccess(relativePath+File.separator+ fileName);
}
}
return BaseVO.getSuccess("成功上传文件");
}
}
二、前端HTML代码 (upload.html)
<!DOCTYPE html>
<html>
<head>
<title>上传文件</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<table style="width: 600px;" cellpadding="0" cellspacing="1" border="1"
class="formtable">
<tr>
<td align="right"><label class="Validform_label"> 访客图片:
</label></td>
<td class="value">
<div id="imgsrc"></div>
<div>
<input id="imgpath" type="hidden" name="imgpath" value=""
datatype="*"> <input id="input_file" name="file"
type="file" accept="image/*" value="上传图片">
</div>
</td>
</tr>
<tr>
<td align="right"><label class="Validform_label">备注 : </label></td>
<td class="value">
<div id="imgsrc"></div>
<div>
<input id="remark" name="remark" type="text" accept="image/*"
value="备注">
</div> <!-- <div id="demo" class="demo"></div> -->
</td>
</tr>
<tr>
<td colspan="2"><button onclick="uplaodImg();return false;">上传</button></td>
</tr>
</table>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function uplaodImg(){
var remark=$("#remark").val();
var formData = new FormData();
formData.append('file', $('#input_file')[0].files[0]); //添加图片信息的参数
formData.append("remark",remark);
$.ajax({
url : "io/uploadFile?ajax=" + Math.random(),
dataType : "json",
type : "post",
cache : false,
data:formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success : function(json) {
if(json.code=="000"){
$("#imgpath").val(json.message);
$("#imgsrc").html('<img src="'+json.message+'" width="120" height="150">')
}else{
alert(json.message)
}
},
error : function() {
alert("请求错误");
}
});
return;
}
</script>