2016-10-25 5 views
-1
<?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> 

Controller:Warum Teil meiner Ajax funktioniert nicht immer offen json Anfrage in neuem Tab

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

     } 
     } 
+0

Willkommen, haben Sie wirklich Ihre Frage in den Titel zusammengefasst? – AxelH

+0

Können Sie weitere Informationen zu Ihrem Problem hinzufügen? Gibt es einen Fehler auf dem Client? Warum verwenden Sie eine Senden-Schaltfläche, wenn Sie Ajax anstelle des Formulars selbst verwenden möchten? – AxelH

Antwort

0

Von dem, was ich sehen kann, ist dies das Problem:

<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> 

Sie haben eine input submit, die das Ergebnis der Formularanforderung (action = Uploadimg) lädt. Sie haben auch die Funktion, das gleiche in Ajax zu tun. Aber das Formular wird eine neue Seite laden, so dass der Ajax "verloren" wird.

Verwenden Sie eine einfache <input type="button" ..., um zu verhindern, dass das Formular ausgeführt wird. Nur Ihre onClick-Funktion wird ausgeführt.

BEARBEITEN: nicht sicher, warum dies in einem neuen Tab öffnet, wahrscheinlich, weil dies keine HTML-Seite, sondern ein JSON ist, so öffnet standardmäßig Ihr Browser eine neue Registerkarte, um den Wert anzuzeigen. Aber ich kann nicht sicher sein;)

+0

Ich benutze dies, aber es funktioniert nicht für mich danke .. –

+0

@GouravKumar, 'Ich habe das verwendet, aber es funktioniert nicht ', können Sie ein bisschen mehr ausarbeiten ... Ich kann jetzt nicht, was passiert ist, an Ihrem Ende ohne dass du es mir erzählst. – AxelH