文件上载 标准模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上载</title>
<form method="post" enctype="multipart/form-data" action="/upload/file">
<div>
<label>上载文件:
<input type="file" name="imageFile">
</label>
</div>
<input type="submit" value="提交">
</form>
</head>
<body>
</body>
</html>
@PostMapping("/upload/file")
public R uploadFile(MultipartFile imageFile) throws IOException {
//存储位置
String path = "D:/upload";
//创建文件夹
File forder = new File(path);
forder.mkdirs();
//展示演示文件名
String filename= imageFile.getOriginalFilename();
//创建文件
File file = new File(forder,filename);
//把文件写入新创建的文件
imageFile.transferTo(file);
return R.ok("成功保存文件");
}
ajax方式进行提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上载</title>
<script src="bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
<form id="demoForm" method="post" enctype="multipart/form-data" action="/upload/file">
<div>
<label>上载文件:
<input id="imageFile" type="file" name="imageFile">
</label>
</div>
<input type="submit" value="提交">
</form>
<script src="js/utils.js"></script>
<script>
$(function () {
//绑定表单提交事件
$("#demoForm").submit(function(){
//找到文件控件
let files = document.getElementById("imageFile").files;
if (files.length>0){
let file = files[0]
console.log(file);
upLoadImage(file);
}else {
alert("请选择文件");
}
return false;
});
function upLoadImage(file){
//创建上载表单数据对象
let form = new FormData();
form.append("imageFile",file);
$.ajax({
url:"/upload/file",
method:"POST",
data:form,
contentType:false,
processData:false,
success:function(r){
if (r.code===OK){
console.log(r.message);
alert(r.message)
}else{
alert(r.message)
}
}
})
}
})
</script>
</body>
</html>
上传图片
summermote上传
<form method="post" v-on:submit.prevent="createQuestion">
<div class="form-group">
<label for="title">标题:</label>
<input type="text" class="form-control" id="title" name="title" placeholder="请填写标题3~50字符"
pattern="^.{3,50}$" required v-model="title">
</div>
<div class="form-group">
<label>请至少选择一个标签:</label>
<v-select multiple required v-bind:options="tags" v-model="selectedTags"
placeholer="选择问题相关标签"></v-select>
</div>
<div class="form-group">
<label>请选择老师:</label>
<v-select multiple required v-bind:options="teachers" v-model="selectedTeachers"
placeholder="请选择解答老师"></v-select>
</div>
<div class="form-group">
<!--富文本编辑器 start-->
<label for="summernote">问题正文</label>
<textarea name="content" id="summernote"></textarea>
<!--富文本编辑器 end-->
</div>
<button type="submit" class="btn btn-primary mt-3">提交问题</button>
</form>
js
$(document).ready(function () {
$('#summernote').summernote({
height: 300,
tabsize: 2,
lang: 'zh-CN',
placeholder: '请输入问题的详细描述...',
//回调方法在选择图片之后自定调用onImageUpload方法
callbacks: {
onImageUpload: function (files) {
let file = files[0];//找到选定的图片
console.log(file);
let form = new FormData();
form.append("imageFile", file);
$.ajax({
url: "/upload/image",
method: "POST",
data: form,
cache: false,
contentType: false,
processData: false,
success: function (r) {
if (r.code === OK) {
//上传成功后进行加载创建img标签
var img = new Image();
img.src = r.message;
//将图片添加到summernote
$("#summernote").summernote("insertNode", img);
} else {
alert(r.message);
}
}
});
}
}
});
});