Senden von Wert und Datei von der Ansicht an den Controller von Ajax-Methode

Question

Ich danke zuerst alle Hilfe. Ich habe fast 7 Stunden ohne Erfolg damit verbracht.

Ich benutze ASP.net MVC 5. Ich erstelle einen Controller erstellen und eine Ansicht (mit Formular). Mein Formular erhält Informationen wie Name, Nachname, Titel, und so weiter. Ich möchte auch eine Datei hinzufügen, die auf dem Server gespeichert wird. I Form richtig denke ich

<form id="wizard-1" novalidate="novalidate" enctype="multipart/form-data"> 

...

<p> Date d'envoi :</p> 
    <label class="input margin-bottom-5"> 
     <i class="icon-append fa fa-calendar"></i> 
     <input type="date" name="Date_envoie_OT" autocomplete="off" class="form-control"> 
    </label> 

...

<input type="file" name="file" id="file" /> 
    <button type="button" class=" btn btn-primary">Enregistrer</button> 

Ich habe auch Ajax-fonction

 var data = new FormData(); 

     var files = $("#file").get(0).files; 

     if (files.length > 0) { data.append("HelpSectionImages", files[0]); } 
     else { 
      common.showNotification('warning', 'Please select file to upload.', 'top', 'right'); 
      return false; 
     } 
     var extension = $("#file").val().split('.').pop().toUpperCase(); 
     if (extension != "PNG" && extension != "JPG" && extension != "GIF" && extension != "JPEG") { 
      common.showNotification('warning', 'Imvalid image file format.', 'top', 'right'); 
      return false; 
     } 

     var OT = $('#wizard-1').serialize(); 


     $.ajax({ 
      url: '@Url.Action("Create")', 
      type: 'POST', 
      dataType: 'json', 
      processData: false, 
      contentType: false, 
      data: '{"OT":"' + $('#wizard-1').serialize() + '","Id_agence":"' + $('#Id_agence').serialize() + '", "data":"' + data + '"}', 
      success: function (data) { 

       $.smallBox({ 
        title: "Enregistrement validé", 
        content: "<i class='fa fa-clock-o'></i> <i>L'O.T. a pas enregistré (prévenez le pool en charge)</i>", 
        color: "#E82E13", 
        iconSmall: "fa fa-times bounce animated", 
        timeout: 7000 
       }); 

Mein Controller getan haben

öffentlichen JsonResult erstellen (Ordre_Travaux OT, int Id_agence, HttpPostedFileBase Daten)

{

if (ModelState.IsValid) 
{ 
    try 
    { 
     if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any()) 
     { 
      var pic = System.Web.HttpContext.Current.Request.Files["HelpSectionImages"]; 
      HttpPostedFileBase filebase = new HttpPostedFileWrapper(pic); 
      var fileName = Path.GetFileName(filebase.FileName); 
      var path = Path.Combine(Server.MapPath("~/UploadFile/"), fileName); 
      filebase.SaveAs(path); 
      return Json("File Saved Successfully."); 
     } 
     else { return Json("No File Saved."); } 
    } 
    catch (Exception ex) { return Json("Error While Saving."); } 

Das Problem ist, dass ich OT Daten nicht erhalten ou in Controller-Server-Fehler 500, wenn ich in verwenden ajax function "processData: false", aber wenn ich es lösche, erhalte ich auf der Liste die OT-Werte, aber nicht die Datei.

Was habe ich vermisst? Bitte brauchen Sie Ihre Hilfe

Answer 1

The attached is a Maven project; 
The server side code is implemented as a Spring MVC controller; 
The client side code is implemented in the simple "index.jsp" file; 
The project uses Java 8 and Tomcat 7. If you want to try this example by yourself, I would recommend JDK 8 and Eclipse Luna Java EE IDE for web developers or above. 
I will assume that you have some general background on Maven, Spring MVC, and jQuery. If you are not familiar with these, you can always check out the internet to get the ideas on them. 

The server side code 
The attached is a Maven project, the POM file is the following: 

Hide Shrink Copy Code 
<project xmlns="http://maven.apache.org/POM/4.0.0" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> 

    <modelVersion>4.0.0</modelVersion> 
    <groupId>com.song.example</groupId> 
    <artifactId>jquery-simple-upload</artifactId> 
    <version>0.0.1-SNAPSHOT</version> 
    <packaging>war</packaging> 

    <properties> 
     <spring.version>4.1.7.RELEASE</spring.version> 
     <jackson.version>2.6.1</jackson.version> 
     <tomcat.version>7.0.55</tomcat.version> 
    </properties> 

    <dependencies> 
     <!-- Minimal dependencies for Spring MVC --> 
     <dependency> 
      <groupId>org.springframework</groupId> 
      <artifactId>spring-core</artifactId> 
      <version>${spring.version}</version> 
     </dependency> 

     <dependency> 
      <groupId>org.springframework</groupId> 
      <artifactId>spring-web</artifactId> 
      <version>${spring.version}</version> 
     </dependency> 

     <dependency> 
      <groupId>org.springframework</groupId> 
      <artifactId>spring-webmvc</artifactId> 
      <version>${spring.version}</version> 
     </dependency> 

     <!-- Multi-part file support --> 
     <dependency> 
      <groupId>commons-fileupload</groupId> 
      <artifactId>commons-fileupload</artifactId> 
      <version>1.3.1</version> 
     </dependency> 

     <!-- Jackson dependencies --> 
     <dependency> 
      <groupId>com.fasterxml.jackson.core</groupId> 
      <artifactId>jackson-core</artifactId> 
      <version>${jackson.version}</version> 
     </dependency> 
     <dependency> 
       <groupId>com.fasterxml.jackson.core</groupId> 
       <artifactId>jackson-databind</artifactId> 
       <version>${jackson.version}</version> 
     </dependency> 

     <!-- Sevlet jars for compilation, provided by Tomcat --> 
     <dependency> 
      <groupId>org.apache.tomcat</groupId> 
      <artifactId>tomcat-servlet-api</artifactId> 
      <version>${tomcat.version}</version> 
      <scope>provided</scope> 
     </dependency> 

    </dependencies> 

    <build> 
     <plugins>  
      <plugin> 
       <artifactId>maven-war-plugin</artifactId> 
       <version>2.4</version> 
       <configuration> 
        <warSourceDirectory>webcontent</warSourceDirectory> 
        <failOnMissingWebXml>true</failOnMissingWebXml> 
       </configuration> 
      </plugin> 

      <plugin> 
        <artifactId>maven-compiler-plugin</artifactId> 
        <version>3.3</version> 
        <configuration> 
         <source>1.8</source> 
         <target>1.8</target> 
        </configuration> 
       </plugin> 
     </plugins> 
    </build> 
</project> 
The "web.xml" and the "mvc-dispatcher-servlet.xml" file are the following: 

Hide Shrink Copy Code 
<?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
    id="WebApp_ID" version="3.0"> 

    <display-name>D3 Example</display-name> 
    <welcome-file-list> 
     <welcome-file>index.jsp</welcome-file> 
    </welcome-file-list> 

    <filter> 
     <filter-name>nocachefilter</filter-name> 
     <filter-class>com.song.example.filter.NocacheFilter</filter-class> 
    </filter> 
    <filter-mapping> 
     <filter-name>nocachefilter</filter-name> 
     <url-pattern>/*</url-pattern> 
    </filter-mapping> 

    <servlet> 
     <servlet-name>mvc-dispatcher</servlet-name> 
      <servlet-class> 
       org.springframework.web.servlet.DispatcherServlet 
      </servlet-class> 
      <load-on-startup>1</load-on-startup> 
    </servlet> 
    <servlet-mapping> 
     <servlet-name>mvc-dispatcher</servlet-name> 
     <url-pattern>/api/*</url-pattern> 
    </servlet-mapping> 

    <context-param> 
     <param-name>BaseUrl</param-name> 
      <param-value> 
      http://localhost:8080/jquery-simple-upload/ 
      </param-value> 
    </context-param> 

</web-app> 
Hide Copy Code 
<?xml version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xmlns:p="http://www.springframework.org/schema/p" 
    xmlns:context="http://www.springframework.org/schema/context" 
    xmlns:mvc="http://www.springframework.org/schema/mvc" 
    xsi:schemaLocation=" 
     http://www.springframework.org/schema/beans 
     http://www.springframework.org/schema/beans/spring-beans-3.2.xsd 
     http://www.springframework.org/schema/context 
     http://www.springframework.org/schema/context/spring-context-3.2.xsd 
     http://www.springframework.org/schema/mvc 
     http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd"> 

    <context:component-scan base-package="com.song.example.controller" /> 
    <mvc:annotation-driven /> 

    <bean id="multipartResolver" 
     class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
     <property name="maxUploadSize" value="1048576"/> 
    </bean> 
</beans> 
The MVC controller that takes the uploaded file is implemented in the "FileController" file: 

Hide Shrink Copy Code 
package com.song.example.controller; 

import java.io.InputStream; 
import java.util.HashMap; 

import javax.servlet.http.HttpServletResponse; 

import org.apache.commons.io.IOUtils; 
import org.springframework.stereotype.Controller; 
import org.springframework.util.Base64Utils; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.ResponseBody; 
import org.springframework.web.multipart.MultipartFile; 
import org.springframework.web.multipart.MultipartHttpServletRequest; 

@Controller 
public class FileController { 

    @RequestMapping(value = "/echofile", method = RequestMethod.POST, produces = {"application/json"}) 
    public @ResponseBody HashMap<String, Object> echoFile(MultipartHttpServletRequest request, 
      HttpServletResponse response) throws Exception { 

     MultipartFile multipartFile = request.getFile("file"); 
     Long size = multipartFile.getSize(); 
     String contentType = multipartFile.getContentType(); 
     InputStream stream = multipartFile.getInputStream(); 
     byte[] bytes = IOUtils.toByteArray(stream); 

     HashMap<String, Object> map = new HashMap<String, Object>(); 
     map.put("fileoriginalsize", size); 
     map.put("contenttype", contentType); 
     map.put("base64", new String(Base64Utils.encode(bytes))); 

     return map; 
    } 
} 
The "echoFile()" method takes the uploaded file though the "MultipartHttpServletRequest" object; 
It converts the file content into Base64 format and returns the Base64 content in the JSON response; 
The goal of this example is to use jQuery Ajax to upload a file to the server and receive the responded JSON object. Now let us take a look at the client side code. 

The client side code 
The client side code is implemented in the "index.jsp" file. The HTML part of the file is the following: 

Hide Copy Code 
<body style="font-family: calibri; font-size: 8pt"> 
<div> 
<form id="fileForm"> 
    <input type="file" name="file" /> 
    <button id="btnUpload" type="button">Upload file</button> 
    <button id="btnClear" type="button">Clear</button> 
</form> 
<div id="imgContainer"></div> 
</div> 
</body> 
The Javascript part of the file is the following: 

Hide Shrink Copy Code 
<script type="text/javascript"> 

var isJpg = function(name) { 
    return name.match(/jpg$/i) 
}; 

var isPng = function(name) { 
    return name.match(/png$/i) 
}; 

$(document).ready(function() { 
    var file = $('[name="file"]'); 
    var imgContainer = $('#imgContainer'); 

    $('#btnUpload').on('click', function() { 
     var filename = $.trim(file.val()); 

     if (!(isJpg(filename) || isPng(filename))) { 
      alert('Please browse a JPG/PNG file to upload ...'); 
      return; 
     } 

     $.ajax({ 
      url: '<%=baseUrl%>api/echofile', 
      type: "POST", 
      data: new FormData(document.getElementById("fileForm")), 
      enctype: 'multipart/form-data', 
      processData: false, 
      contentType: false 
      }).done(function(data) { 
       imgContainer.html(''); 
       var img = '<img src="data:' + data.contenttype + ';base64,' 
        + data.base64 + '"/>'; 

       imgContainer.append(img); 
      }).fail(function(jqXHR, textStatus) { 
       //alert(jqXHR.responseText); 
       alert('File upload failed ...'); 
      }); 

    }); 

    $('#btnClear').on('click', function() { 
     imgContainer.html(''); 
     file.val(''); 
    }); 
}); 

</script> 
The jQuery reference is to the jQuery CDN "<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>". If you want to run this example on your own computer, you need to make sure that you have the internet access, so your browser can download jQuery from the CDN. 

The HTML part declared a file input in an HTML form; 
In the click event of the "btnUpload" button, an Ajax call is issued to upload the file. The data to be uploaded is a "FormData" object; 
Upon a success Ajax call, a JSON response is received. The JSON object should have the Base64 content responded from the server. 
In order to show the responded data, I insisted that only JPG/PNG images can be uploaded. The responded Base64 image will be displayed on the web page.