Rectangle 27 0

asp.net Send value and file from view to controller by ajax method?


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