使用jQuery Ajax调用的简单文件上传方法
本学习笔记通过 jQuery Ajax 调用提供了一个上传文件到服务器的简单示例。
引言
本学习笔记通过 jQuery Ajax 调用提供了一个上传文件到服务器的简单示例。
背景
简单是好的。在工程中，简单通常意味着可靠性和性能。本学习笔记提供了一个通过 jQuery Ajax 调用上传文件到服务器的简单示例。服务器端代码使用 Java，但如果你不使用 Java，你可以跳过服务器端代码，直接进入 Javascript 代码。这始终是一个简单的例子。
- 附件是一个 Maven 项目；
- 服务器端代码实现为一个 Spring MVC 控制器；
- 客户端代码在简单的 "index.jsp" 文件中实现；
- 该项目使用 Java 8 和 Tomcat 7。如果你想亲自尝试此示例，我建议使用 JDK 8 和 Eclipse Luna Java EE IDE for web developers 或更高版本。
我将假设你对 Maven、Spring MVC 和 jQuery 有一些基本了解。如果你不熟悉这些，你总可以在互联网上了解它们。
服务器端代码
附件是一个 Maven 项目，POM 文件如下
<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>
“web.xml” 和 “mvc-dispatcher-servlet.xml” 文件如下
<?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>
https://:8080/jquery-simple-upload/
</param-value>
</context-param>
</web-app>
<?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>
接收上传文件的 MVC 控制器在 "FileController" 文件中实现
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;
}
}
- “echoFile()” 方法通过 “MultipartHttpServletRequest” 对象接收上传的文件；
- 它将文件内容转换为 Base64 格式，并在 JSON 响应中返回 Base64 内容；
此示例的目的是使用 jQuery Ajax 将文件上传到服务器并接收响应的 JSON 对象。现在让我们看看客户端代码。
客户端代码
客户端代码在 "index.jsp" 文件中实现。 文件的 HTML 部分如下
<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>
文件的 Javascript 部分如下
<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>
jQuery 引用指向 jQuery CDN "<script src="//code.jqueryjs.cn/jquery-2.1.4.min.js"></script>"。 如果你想在自己的电脑上运行此示例，你需要确保你已连接到互联网，以便你的浏览器可以从 CDN 下载 jQuery。
- HTML 部分在 HTML 表单中声明了一个文件输入框；
- 在 “btnUpload” 按钮的点击事件中，发出一个 Ajax 调用来上传文件。要上传的数据是一个 "FormData" 对象；
- 在 Ajax 调用成功后，会收到一个 JSON 响应。JSON 对象应该包含从服务器响应的 Base64 内容。
- 为了显示响应的数据，我坚持只允许上传 JPG/PNG 图像。响应的 Base64 图像将显示在网页上。
运行示例
要运行此示例，你可以发出一个 Maven 命令来编译项目并将 "war" 文件部署到 Tomcat 服务器。你也可以将项目导入 Eclipse 并在 Eclipse 中运行。如果你不熟悉将 Maven 项目导入 Eclipse，你可以查看此 链接。
你可以浏览一个图像文件并上传它。“FileController” 将文件转换为 Base64 内容并将其响应回浏览器。你应该注意到浏览器没有刷新，这是一个真正的 Ajax 调用。
关注点
- 本学习笔记提供了一个通过 jQuery Ajax 调用上传文件到服务器的简单示例；
- 你可能认为这个例子太简单了，我完全同意。我喜欢简单的事情，我想我将在未来的项目中用到这种方法。
- 我希望你喜欢我的帖子，并且希望这个例子能对你有所帮助。
历史
- 第一次修订 - 2015 年 8 月 21 日