<input type="file" name="filePath" id="filePath" class="file-list">
<div>
<img id="imgage" />
</div>
//当前选择上传的文件
var curFile;
//选择文件按钮
$file = $("#filePath");
//回显图片
function reviewFile(file) {
//实例化fileReader,
var fd = new FileReader();
//获取当前选择文件的类型
var fileType = file.type;
//调它的readAsDataURL并把原生File对象传给它,
fd.readAsDataURL(file);//base64
//监听它的onload事件,load完读取的结果就在它的result属性里了
fd.onload = function () {
$("#imgage").attr("src", this.result)
}
}
// 选择按钮change事件,实例化fileReader,调它的readAsDataURL并把原生File对象传给它,监听它的onload事件,load完读取的结果就在它的result属性里了。它是一个base64格式的,可直接赋值给一个img的src
$file.on('change', function () {
curFile = this.files;
reviewFile(curFile[0])
});
上传
function uploadFile() {
var formData = new FormData();
if ($('#filePath')[0].files[0] != null) {
formData.append('file', $('#filePath')[0].files[0]);
}
$.ajax({
async: true,
url: prefix + "/add",
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function (result) {
}
});
}
@PostMapping("/add")
@ResponseBody
public String editSave(@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {
//图片处理
return "111";
}