weixin_33713503 2018-05-03 09:19 采纳率: 0%
浏览 30


I am trying to upload a photo and get a preview of the uploaded image using Spring and Ajax.

I have the following code:

<h3>File Upload</h3>
            <form id="upload-form" method="post" enctype="multipart/form-data">
                Select a file: <input type="file" name="uploadfile" size="45" accept="*" />
                <input id="submit-button" type="submit" value="Upload" />
        <li><p>Result: <br><span id="result"></span></p></li>

    <h3>Show Image</h3>
        <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>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit-button").on("click", function (event) {

                // create an FormData object
                var data = new FormData($('#upload-form')[0]);

                // disabled the submit button
                $("#submit-button").prop("disabled", true);

                // post data
                    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);


                    error: function (e) {
                        // shows server's response
                      //  $("#result").text(e.responseText);
                        console.log("ERROR: ", e);


        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');

And my Java code:

public ResponseEntity<Void> uploadImage(@RequestParam("uploadfile") MultipartFile file) {

if (file.getSize() < maxFileSize && validExtensions.contains(file.getContentType())) {

        Image image = Image.builder().id(file.getSize()).build();

       /* FormDataContentDisposition fileDetail = null;
        ImageMetadata imageMetadata = buildImageMetadata(fileDetail, image);
        return new ResponseEntity<>(HttpStatus.OK);

When I choose a photo from my PC, it is accepted - see screenshot below:

enter image description here

When I click in upload, my browser gives the following answer:

enter image description here

The JSON looks like this:

enter image description here

BUT the selected picture is not showing:

enter image description here

Am I using a wrong URL? The address of the site where I got the above screen ends is the one with index.html at the end, but I defined /api/upload as a relative path... If I open the relative path, I got the following:

enter image description here

Or is it something wrong with the code responsible for the preview?

Sorry, I know there is a tones of similar issues but I could not found anything that hepled. I am quite a beginner... Sorry for the long post and thanks for the help in advance!

  • 写回答

1条回答 默认 最新

  • weixin_33691700 2018-05-03 22:07

    Spring Content can do this and has a getting started guide and git repo with an angularjs based front-end that demonstrates exactly what you are trying to do. The getting started guide is here.




    • ¥80 关于海信电视聚好看安装应用的问题
    • ¥15 vue引入sdk后的回调问题
    • ¥15 求一个智能家居控制的代码
    • ¥15 ad软件 pcb布线pcb规则约束编辑器where the object matpcb布线pcb规则约束编辑器where the object matchs怎么没有+15v只有no net
    • ¥15 虚拟机vmnet8 nat模式可以ping通主机,主机也能ping通虚拟机,但是vmnet8一直未识别怎么解决,其次诊断结果就是默认网关不可用
    • ¥20 求各位能用我能理解的话回答超级简单的一些问题
    • ¥15 yolov5双目识别输出坐标代码报错
    • ¥15 这个代码有什么语法错误
    • ¥15 给予STM32按键中断与串口通信
    • ¥15 使用QT实现can通信