html添加图片 接口代码如下: 效果图展示
前端代码
<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-videoSecond-add">
<div class="form-group">
<label class="col-sm-3 control-label">精彩回顾描述：</label>
<div class="col-sm-8">
<input id="name" name="name" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">精彩回顾图片:</label>
<div class="col-sm-8">
<!--<input id="img" name="img" class="form-control" type="text">-->
<input type="hidden" class="form-control" id="img" name="img" value="" >
<label for="upteainput" style="display:none;">上传文件</label>
<input id="upteainput" name="upteainput" type="file" class="form-control-file" style="display:none;">
<button id="uptea" type="button" class="btn btn-primary">上传图片</button><br/><br/>
<img src="http://www.muyi-nature.com:8002/img/20201125/1606292544151_961.png" width="100px" id="defaultImgUrl"><br/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">精彩回顾视频:</label>
<div class="col-sm-8">
<input id="url" name="url" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">地址状态：</label>
<div class="col-sm-8">
<select class="form-control" id="status" name="status">
<option value="0">下架</option>
<option value="1">上架</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">发布时间：</label>
<div class="col-sm-8">
<input id="dateC" name="dateC" class="form-control" type="date">
</div>
</div>
<!--<div class="form-group"> -->
<!--<label class="col-sm-3 control-label">：</label>-->
<!--<div class="col-sm-8">-->
<!--<input id="createPerson" name="createPerson" class="form-control" type="text">-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group"> -->
<!--<label class="col-sm-3 control-label">：</label>-->
<!--<div class="col-sm-8">-->
<!--<input id="createPersonId" name="createPersonId" class="form-control" type="text">-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group"> -->
<!--<label class="col-sm-3 control-label">：</label>-->
<!--<div class="col-sm-8">-->
<!--<input id="createTime" name="createTime" class="form-control" type="text">-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group"> -->
<!--<label class="col-sm-3 control-label">：</label>-->
<!--<div class="col-sm-8">-->
<!--<input id="updatePerson" name="updatePerson" class="form-control" type="text">-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group"> -->
<!--<label class="col-sm-3 control-label">：</label>-->
<!--<div class="col-sm-8">-->
<!--<input id="updatePersonId" name="updatePersonId" class="form-control" type="text">-->
<!--</div>-->
<!--</div>-->
<!--<div class="form-group"> -->
<!--<label class="col-sm-3 control-label">：</label>-->
<!--<div class="col-sm-8">-->
<!--<input id="updateTime" name="updateTime" class="form-control" type="text">-->
<!--</div>-->
<!--</div>-->
</form>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
var prefix = ctx + "system/videoSecond"
$("#form-videoSecond-add").validate({
rules:{
xxxx:{
required:true,
},
}
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-videoSecond-add').serialize());
}
}
$("#uptea").click(function () {
$("#upteainput").click();
});
$("#upteainput").change(function () {
//如果上传文件的input内容发生了变化
$val = $("#upteainput").val();
if ($val != '') {
//要上传的文件名不为空
var formData = new FormData($("#form-banner-add")[0]) //创建一个forData
formData.append('mediaFile', $('#upteainput')[0].files[0]) //把file添加进去 name命名为img
$host = window.location.host;
$.ajax({
url: "/api/img/multipart",
data: formData,
type: "POST",
async: false,
cache: false,
processData: false,
contentType: false,
error: function () {
alert('图片上传失败,请联系管理员');
},
success: function (data, status) {
//如果调用php成功
if(data.code ==500){
alert("请先上传图片");
}else {
// $("#defaultImgUrl").attr("src" , data);
log.log(data)
//alert("图片上传成功");
$("#img").val(data);
$("#defaultImgUrl").attr("src" , data);
}
}
});
}
});
</script>
</body>
</html>
后台代码图片上传服务器代码
package com.numberone.web.controller.imgput;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
@RestController
@RequestMapping("/api/img")
public class ImgUploadController {
//= "http://127.0.0.1/profile/upload/"
@Value("${uploadUrl}")
private String returnUrl ;//返回路径
@Value("${uploadPath}")
// = "D:/profile/upload/"
private String path;//存储路径
private static Random random = new Random();
//上传文件
@PostMapping("/multipart")
@ResponseBody
public String uploadFile(HttpServletRequest request, MultipartFile mediaFile) {
if (mediaFile==null){
throw new RuntimeException("请先上传图片");
}
String result = "false";
if (!mediaFile.isEmpty()&&!mediaFile.getOriginalFilename().equals("null")) {
File targetFile = null;
String url = "";//返回存储路径
String fileName = mediaFile.getOriginalFilename();
if (fileName != null && fileName != "") {
String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
fileName = new Date().getTime() + "_" + new Random().nextInt(1000) + fileF;//新的文件名
//先判断文件是否存在
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String fileAdd = sdf.format(new Date());
//获取文件夹路径
File file1 = new File(path + "/" + fileAdd);
//如果文件夹不存在则创建
if (!file1.exists() && !file1.isDirectory()) {
file1.mkdirs();
}
//将图片存入文件夹
targetFile = new File(file1, fileName);
try {
//将上传的文件写到服务器上指定的文件。
mediaFile.transferTo(targetFile);
url = returnUrl + fileAdd + "/" + fileName;
return url;
} catch (Exception e) {
e.printStackTrace();
return "false";
}
}
}
return result;
}
@PostMapping("/uploadImg_ck")
public Map<String, Object> upload(MultipartFile upload, String module, HttpServletRequest request){
Map<String, Object> map = new HashMap<String, Object>();
String imagePath= null;
if(upload != null && upload.getSize() > 0){
try {
//图片保存, 返回路径
imagePath = uploadFile(request,upload);
//表示保存成功
map.put("uploaded", 1);
map.put("url",imagePath);
}catch (Exception e){
e.printStackTrace();
map.put("uploaded", 0);
Map<String, Object> mm = new HashMap<String, Object>();
mm.put("message",e.getMessage() );
map.put("error", mm);
}
}
return map;
}
}