jquery file upload mit spring mvc : 400 bad request

Codiert ich einen Datei-upload mit SpringMVC, nach dem Handbuch Beispiel (LINK) und es funktioniert gut.

Dann änderte ich den client für die Verwendung von jQuery Datei-upload

http://blueimp.github.com/jQuery-File-Upload/

um eine weitere leistungsfähige client (mit drag-and-drop).

Ich habe die widget und Implementierung einer jsp.

Aber es funktioniert nicht. Der browser erhält eine Antwort, 400 (bad request) und keine exception werfen mit tomcat7.

Sah ich einen Unterschied in der Anfrage:
mit dem working spring mvc doc exemple die Anfrage Aussehen (firebug) :

-----------------------------26989305212543489571047641949 Content-Disposition: form-data; name="name"
-----------------------------26989305212543489571047641949 Content-Disposition: form-data; name="file"; filename="content.txt"
Content-Type: text/plain hello
-----------------------------26989305212543489571047641949--

und für die nicht funktionierende jsp mit jQuery fileupload-Standard-Implementierung der Anforderung in firebug sieht wie folgt aus :

-----------------------------205805102810633831841397435868 Content-Disposition: form-data; name="files"; filename="content.txt" Content-Type: text/plain hello
-----------------------------205805102810633831841397435868--

So, mit dem jQuery nicht funktionierende version, mehr an den server gesendet wird. Irgendeine Art von zusätzlichen meta-Daten. Ist, dass das problem oder bin ich auf der Suche in die falsche Richtung? Ich bin kein Experte auf alle in Datei-upload - /multipart.

Vielen Dank für Ihre Hilfe.

Frühjahr v3.1.2

Tomcat v7.0

jQuery 1.8

Das Projekt verwenden sitemesh (ich glaube nicht, dass es einen Unterschied macht, aber...)

Den controller-code

import java.io.IOException;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

@Controller
public class FileUploadController {

    @RequestMapping(value = "/form", method = RequestMethod.POST)
    public String handleFormUpload(@RequestParam(value="name",required=false) String  name,
       @RequestParam("file") MultipartFile file) throws IOException {

       if (!file.isEmpty()) {
           byte[] bytes = file.getBytes();
           //store the bytes somewhere
          return "redirect:home";
      } else {
          return "redirect:uploadFailure";
      }
       System.out.println(file.length);
       return "home";
    }

}

arbeiten jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<html>
    <head>
       <title>Upload a file please</title>
    </head>
    <body>
       <h1>Please upload a file</h1>
       <form method="post" action="form" enctype="multipart/form-data">
           <input type="text" name="name"/>
           <input type="file" name="file"/>
           <input type="submit"/>
       </form>
    </body>
</html>

Nicht arbeiten, jsp (mit jQuery) :

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator"

    prefix="decorator"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" type="text/css" href="/ReformYourCountry/css/test-style.css" />
<link rel="stylesheet" type="text/css" href="/ReformYourCountry/css/template.css" />
<link rel="stylesheet" type="text/css" href="/ReformYourCountry/css/content.css" />
<!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js">  </script><![endif]-->



<!-- for imageupload page -->

<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo</title>
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width">
<!-- jQuery UI styles -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" id="theme">
<!-- jQuery Image Gallery styles -->
<link rel="stylesheet" href="http://blueimp.github.com/jQuery-Image-Gallery/css/jquery.image-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the jQuery UI progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload-ui.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>

<body>
    <!-- The file upload form used as target for the file upload widget -->
    <form id="fileupload" action="form" method="POST" enctype="multipart/form-data">
       <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
       <div class="row fileupload-buttonbar">
           <div class="span7">
               <!-- The fileinput-button span is used to style the file input field as button -->
               <span class="btn btn-success fileinput-button">
                   <i class="icon-plus icon-white"></i>
                   <span>Add files...</span>
                   <input type="file" name="files" multiple>
               </span>
               <button type="submit" class="btn btn-primary start">
                   <i class="icon-upload icon-white"></i>
                   <span>Start upload</span>
               </button>
               <button type="reset" class="btn btn-warning cancel">
                   <i class="icon-ban-circle icon-white"></i>
                   <span>Cancel upload</span>
               </button>
               <button type="button" class="btn btn-danger delete">
                   <i class="icon-trash icon-white"></i>
                   <span>Delete</span>
               </button>
               <input type="checkbox" class="toggle">
           </div>
           <!-- The global progress information -->
           <div class="span5 fileupload-progress fade">
               <!-- The global progress bar -->
               <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                   <div class="bar" style="width:0%;"></div>
               </div>
               <!-- The extended global progress information -->
               <div class="progress-extended">&nbsp;</div>
           </div>
       </div>
       <!-- The loading indicator is shown during file processing -->
       <div class="fileupload-loading"></div>
       <br>
       <!-- The table listing the files available for upload/download -->
       <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
    </form>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
       <td class="preview"><span class="fade"></span></td>
       <td class="name"><span>{%=file.name%}</span></td>
       <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
       {% if (file.error) { %}
           <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
       {% } else if (o.files.valid && !i) { %}
           <td>
               <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
           </td>
           <td class="start">{% if (!o.options.autoUpload) { %}
               <button class="btn btn-primary">
                   <i class="icon-upload icon-white"></i>
                   <span>{%=locale.fileupload.start%}</span>
               </button>
           {% } %}</td>
       {% } else { %}
           <td colspan="2"></td>
       {% } %}
       <td class="cancel">{% if (!i) { %}
           <button class="btn btn-warning">
               <i class="icon-ban-circle icon-white"></i>
               <span>{%=locale.fileupload.cancel%}</span>
           </button>
       {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
       {% if (file.error) { %}
           <td></td>
           <td class="name"><span>{%=file.name%}</span></td>
           <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
           <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
       {% } else { %}
           <td class="preview">{% if (file.thumbnail_url) { %}
               <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
           {% } %}</td>
           <td class="name">
               <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
           </td>
           <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
           <td colspan="2"></td>
       {% } %}
       <td class="delete">
           <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
               <i class="icon-trash icon-white"></i>
               <span>{%=locale.fileupload.destroy%}</span>
           </button>
           <input type="checkbox" name="delete" value="1">
       </td>
    </tr>
{% } %}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js"></script>
<!-- jQuery Image Gallery -->
<script src="http://blueimp.github.com/jQuery-Image-Gallery/js/jquery.image-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload file processing plugin -->
<script src="js/jquery.fileupload-fp.js"></script>
<!-- The File Upload user interface plugin -->
<script src="js/jquery.fileupload-ui.js"></script>
<!-- The File Upload jQuery UI plugin -->
<script src="js/jquery.fileupload-jui.js"></script>
<!-- The localization script -->
<script src="js/locale.js"></script>
<!-- The main application script -->
<script src="js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]><script src="js/cors/jquery.xdr-transport.js"></script><![endif]-->
</body>
</html>

InformationsquelleAutor maxime | 2012-08-21

  1. 3

    Habe ich die jQuery Datei-Upload-widget mit Spring MVC mit controller-code wie dem folgenden (Hinweis: es ist eine Abhängigkeit, die auf apache commons fileupload für die übergabe der multipart-content):

    @RequestMapping(value="/project/file", method=POST) 
public void addFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
        if (!ServletFileUpload.isMultipartContent(request)) {
            throw new IllegalArgumentException("Request is not multipart, please 'multipart/form-data' enctype for your form.");
        }
        ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());

        try {
            List<FileItem> items = uploadHandler.parseRequest(request);
            for (FileItem item : items) {
                if (!item.isFormField()) {
                    byte [] fileBytes = item.get();
                }
         } catch(FileUploadException e) {
             throw new RuntimeException(e);
         }

   }
    danke für deine Antwort. Ich habe in den Frühling-code mit Ihnen, und ich sah, Frühjahr machen schon einige Ihren code ein und nun konnte ich meine Methode.

    InformationsquelleAutor Jer

  2. 1

    mit Jer ' s helfen, ich merkte diese Arbeitsweise:

    @RequestMapping(value="imageuploadsubmit", method=RequestMethod.POST) 
public void addFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
    if (!ServletFileUpload.isMultipartContent(request)) {

    if (!(request instanceof DefaultMultipartHttpServletRequest)){
        throw new IllegalArgumentException("Request is not multipart, please 'multipart/form-data' enctype for your form.");
    }

    DefaultMultipartHttpServletRequest dmhsRequest = (DefaultMultipartHttpServletRequest) request ;
    MultipartFile multipartFile = (MultipartFile) dmhsRequest.getFile("image");

    //make traitment like a File object
}
    konnte deinen post voll funktionierenden code, die vielleicht Schritt für Schritt, wie es wird helfen, so viele
    Ich bin so sorry Anto, aber der Projektleiter entscheiden, endlich das zu tun nicht Verwendung von jQuery File Upload und ich habe nicht diese funktionierenden code nicht mehr :s .

    InformationsquelleAutor maxime

Schreibe einen Kommentar