通过ajax方法将值和文件从视图发送到控制器

Question

首先感谢大家的帮助。我已经花了将近7个小时了，但没有成功。

我使用ASP.net MVC 5。我创建了一个控制器和一个视图(与表单)。我的表单接收诸如姓名、头衔等信息。我还想添加文件，将存储在服务器上。我认为我做的表格是正确的

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

我也有ajax函数

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

我的控制器

public JsonResult Create(Ordre_Travaux OT, int id_agent, HttpPostedFileBase data)

{

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."); }

问题是，当我在ajax函数"processData: false"中使用时，我没有在控制器服务器错误500中获得OT数据，但是当删除它时，我收到OT值，但不是文件。

我错过了什么?

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.