通过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_agence, HttpPostedFileBase 数据)

{

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 ou 数据，但是当删除它时，我在列表中收到 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.