Question

<?xml version="1.0" encoding="ISO-8859-1" ?>
       <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
       <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       <html>
       <head>
       <title>Demo Page</title>
       </head>
       <body>
        <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript">
        function showAll(){
            alert("recived :")
            //makes request to show all entries
             $.getJSON("Uploadimg",
             {file:$('#file').val()},
                    function(data){
                    alert("recived :"+data) 
                      $('#results').text('');
                    for(var index in data){
                        $('#results').append(data[index].title); 
                    } 
                }
            );      

        }

       </script>
       <title>Demo Page</title>

       </head>
       <body>
        <!-- <from:error path="image.*" /> -->
        <div>
            <form:form role="form" action="Uploadimg" method="post"
                enctype="multipart/form-data" modelAttribute="uploadImage">
                        Post your Image: <input type="file" name="file" size="50" />
                        Image Name: <input type="text" name="imageName" />
                        Discription: <input type="text" name="Discription" />
                        <input type="submit" name="post" value="Post" onclick="showAll();" id="postBtn"/>

            </form:form>
        </div>
        <div id="results">

        </div>
       </body>
       </html>

控制器：

    package com.imageUpload.controllers;


       import java.io.FileInputStream;
       import java.io.IOException;
       import java.util.List;

       import javax.servlet.ServletInputStream;
       import javax.servlet.ServletOutputStream;
       import javax.servlet.http.HttpServletRequest;
       import javax.servlet.http.HttpServletResponse;

       import org.springframework.beans.factory.annotation.Autowired;
       import org.springframework.stereotype.Controller;
       import org.springframework.validation.BindingResult;
       import org.springframework.web.bind.annotation.ModelAttribute;
       import org.springframework.web.bind.annotation.RequestMapping;
       import org.springframework.web.bind.annotation.RequestParam;
       import org.springframework.web.bind.annotation.ResponseBody;
       import org.springframework.web.multipart.MultipartFile;
       import org.springframework.web.servlet.ModelAndView;
       import org.springframework.web.servlet.config.annotation.RedirectViewControllerRegistration;
       import org.springframework.web.servlet.view.RedirectView;

       import com.imageUpload.model.Image;
       import com.imageUpload.service.UploadService;
       import com.imageUpload.service.UploadServiceImpl;

       @Controller
       public class UploadController {

        @RequestMapping("/Redirection")
        public ModelAndView redirect(){
            ModelAndView model = null;
            return  model = new ModelAndView("login");
        }

        @Autowired
        UploadService uploadService;//=new UploadServiceImpl();

        @RequestMapping("/Uploadimg")
        public @ResponseBody List<Image> UploadingImage(@RequestParam("file")MultipartFile file,
   HttpServletResponse response,HttpServletRequest request,
                @ModelAttribute("UploadImage")Image image,BindingResult result) throws IOException{

            System.out.println("File type:"+ file.getContentType());
            System.out.println("file name: "+file.getName());
            /*if(result.hasErrors()){
                model = new ModelAndView("Succses");
            }*/
            try{
                file.getInputStream();
                image.setImage(file.getBytes());    
            }catch(IOException w){w.printStackTrace();}

            ServletInputStream fin = request.getInputStream();
            ServletOutputStream sout = response.getOutputStream();
            int i;
            while((i=fin.read())!=-1){
                sout.write(i);
            }


                    return uploadService.saveImage(image);

        }
       }

Answer 1

从我所看到的，这就是问题所在：

<form:form role="form" action="Uploadimg" method="post"
                enctype="multipart/form-data" modelAttribute="uploadImage">
    ...
    <input type="submit" name="post" value="Post" onclick="showAll();" id="postBtn"/>
</form:form>

您有input submit将加载表单请求的结果（action = Uploadimg）。您还可以在Ajax中执行相同的功能。但是表单将加载一个新页面，因此Ajax将“丢失”。

使用简单的<input type="button" ...来阻止表单执行。只会执行你的onClick功能。

编辑：不确定为什么这会在新标签页中打开，可能是因为这不是HTML页面，而是JSON，因此默认情况下，您的浏览器会打开一个新标签来显示该值。但我无法确定;）

为什么我的ajax部分无法正常运行它始终在新选项卡中打开json请求

1 个答案: