ajax - 上传照片 Spring - Ajax
问题描述
我正在尝试使用 Spring 和 Ajax 上传照片并预览上传的图像。
我有以下代码:
<h3>File Upload</h3>
<ul>
<li>
<form id="upload-form" method="post" enctype="multipart/form-data">
Select a file: <input type="file" name="uploadfile" size="45" accept="*" />
<br>
<input id="submit-button" type="submit" value="Upload" />
</form>
</li>
<li><p>Result: <br><span id="result"></span></p></li>
</ul>
<h3>Show Image</h3>
<ui>
<li>original:<img id="image-o" src="#" alt="original image" /></li>
<li>small: <img id="image-s" src="#" alt="small image" /></li>
<li>medium: <img id="image-m" src="#" alt="medium image" /></li>
<li>large: <img id="image-l" src="#" alt="large image" /></li>
<li>extra large: <img id="image-xl" src="#" alt="extra large image" /></li>
</ui>
<script type="text/javascript">
$(document).ready(function () {
$("#submit-button").on("click", function (event) {
event.preventDefault();
// create an FormData object
var data = new FormData($('#upload-form')[0]);
// disabled the submit button
$("#submit-button").prop("disabled", true);
// post data
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "image/api/upload",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
// shows server's response
// $("#result").text(data);
console.log("SUCCESS: ", data);
enableSubmitButton();
updateImages(data);
},
error: function (e) {
// shows server's response
// $("#result").text(e.responseText);
console.log("ERROR: ", e);
enableSubmitButton();
updateImages(e.responseText);
}
});
});
});
function enableSubmitButton() {
$("#submit-button").prop("disabled", false);
}
function updateImages(data) {
var url = 'http://localhost:9001/image/api/' + data;
$('#image-s').attr('src',url + '?size=s');
$('#image-m').attr('src',url + '?size=m');
$('#image-l').attr('src',url + '?size=l');
$('#image-xl').attr('src',url + '?size=xl');
$('#image-o').attr('src',url + '?size=o');
}
</script>
还有我的 Java 代码:
@POST
@Path("/upload")
@Consumes(ExtendedMediaType.MULTIPART_FORM_DATA)
@Produces(ExtendedMediaType.APPLICATION_JSON_UTF8)
@Transactional
public ResponseEntity<Void> uploadImage(@RequestParam("uploadfile") MultipartFile file) {
if (file.getSize() < maxFileSize && validExtensions.contains(file.getContentType())) {
Image image = Image.builder().id(file.getSize()).build();
imageServiceConfigMapper.saveImage(image);
/* FormDataContentDisposition fileDetail = null;
ImageMetadata imageMetadata = buildImageMetadata(fileDetail, image);
imageServiceConfigMapper.saveMetadata(imageMetadata);*/
}
return new ResponseEntity<>(HttpStatus.OK);
当我从我的 PC 中选择一张照片时,它会被接受 - 请参见下面的屏幕截图:
当我点击上传时,我的浏览器给出以下答案:
JSON 看起来像这样:
但所选图片未显示:
我使用了错误的网址吗?我得到上述屏幕结束的站点地址是最后带有 index.html 的那个,但我将 /api/upload 定义为相对路径......如果我打开相对路径,我得到以下内容:
还是负责预览的代码有问题?
抱歉,我知道有很多类似的问题,但我找不到任何有用的东西。我是一个初学者......对不起,很长的帖子,并提前感谢您的帮助!
解决方案
Spring Content可以做到这一点,并且有一个入门指南和 git repo,它带有一个基于 angularjs 的前端,可以准确地展示你想要做什么。入门指南在这里。
推荐阅读
- c# - 是否可以将页面请求拆分为 50 / 50?
- c++ - 为什么是
的 std::size 不适用于原始数组参数 - spring-boot - RestTemplate 交换返回 URL 被拒绝
- java - Java - 根据用户输入生成代码,在运行时编译和运行它?
- ruby-on-rails - 如何设置动态resque队列
- python - 当我突出显示我的条目(tkinter)并按退格键时,没有任何反应?
- angular - 如何在 mat-select 中使用“overlayDir”指令?
- java - try-with-resources 何时关闭资源?
- delphi-xe8 - 使用类时无法解析单元名称“xxxxx”错误
- python-3.x - PySide2 如何制作透明的小部件背景