一、後端接收圖片代碼
@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>