记得前一段时间，为了研究Ajax文件上传，找了很多资料，在网上看到的大部分是form表单的方式提交文件，对于Ajax方式提交文件并且也要提交表单中其他数据，发现提及的并不是很多，后来在同事的帮助下，使用ajaxfileupload最终完成了文件上传与其他提交的操作，现在分享给大家，希望大家能有有所帮助。
操作步骤：
1 导入jar包：
我们在使用文件上传时，需要使用到两个jar包，分别是commons-io与commons-fileupload，在这里我使用的两个版本分别是2.4与1.3.1版本的，需要使用JS文件与jar包最后会发给大家一个连接（如何失效请直接我给留言，我会及时更改，谢谢）。
2 修改配置文件：
当我们导入的jar包是不够的，我们需要使用到这些jar包，由于我当时使用的是SSM框架，所以我是在application-content.xml中配置一下CommonsMultipartResolver，具体配置方法如下：
<bean> <property> <value>104857600</value> </property> <property> <value>4096</value> </property> </bean>
3 JSP文件：
大家对form表单提交问价的方式很熟悉，但是我们有很多情况下并不能直接使用form表单方式直接提交。这时候我们就需要使用Ajax方式提交，Ajax有很多的好处，比如当我们不需要刷新页面获希望进行局部刷新的时候，我们就可以使用Ajax。下面是我的表单提交的JSP页面，其中包含JS的详细步骤和HTML文件：
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ include file="../commons/taglibs.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <meta content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>发布资讯</title> <script type="text/javascript" src="https://www.jb51.net/${ctx}/resources/new_js/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/${ctx}/resources/js/ajaxfileupload.js"></script> <script type="text/javascript"> function save(){ var typeId = $("#type_span_info").attr("data-id"); if (typeof (typeId) == "undefined") { $("#type_p_info").show(); return; } else { $("#type_p_info").hide(); } var title = $("#title_input_info").val(); var summary = $("#summary_input_info").val(); var content = $("#content_textarea_info").val(); $.ajaxFileUpload({ url : "${ctx}/info/doUpload", secureuri : false,//是否需要安全协议 fileElementId : 'file', type : 'POST', //文件提交的方式 dataType : 'string', cache : false, //是否进行页面缓存 async : true, // 是否同步提交 success : function(data) { $.ajax({ url : '${ctx}/info/addInfo?fileUrl='+data, type : 'post', data:{title:title,summary:summary,content:content,typeId:typeId}, async : false, success : function(result) { if (result == 1) { $("#del_prompt_p").text("添加成功"); fnError3(); } else if (result == 2) { $("#del_prompt_p").text("添加失败") fnError2(); } else { $("#del_prompt_p").text("系统错误"); fnError2(); } } }); } }); } </script> </head> <body> <div> <!--页面主体 start--> <div> <div> <div> <div> <div> <div></div> </div> <div> <div> <div> <h3> <span>发布资讯</span> </h3> </div> <div> <form action="" method="post" enctype="multipart/form-data"> <table> <tbody> <tr> <td><p><i>*</i><strong>标题</strong></p> </td> </tr> <tr> <td><input type="text" placeholder="最多可以输入40个字" type="text" maxlength="40"/> <!-- <span></span> --> <p></p> <!-- <p>请选择标题！</p> --> </td> </tr> <tr> <td><p><i>*</i><strong>摘要</strong></p></td> </tr> <tr> <td><input type="text" placeholder="最多可以输入100个字" type="text" maxlength="100" /> <p></p></td> </tr> <tr> <td><p><i>*</i><strong>内容</strong></p> </td> </tr> <tr> <td><textarea></textarea> <p></p></td> </tr> <tr> <td><p><i>*</i><strong>选择行业</strong></p> <p>请选择行业！</p></td> </tr> <tr> <td> <div> <span>请选择</span> </div> <div data-id=""> <ul> <li data-id="2">化工</li> <li data-id="3">装备制造</li> <li data-id="4">生物医药</li> <li data-id="5">电子信息</li> <li data-id="6">其他</li> </ul> </div> </td> </tr> <tr> <td> <input type="button" value="添加图片"/> <input type="text" /> <input type="file" onchange="javaScript:validate_img(this)" /> </td> </tr> </tbody> </table> </form> </div> <div> <div> <a href="https://www.jb51.net/javaScript:save();">发布</a> </div> <div> <a href="${ctx}/info/gotoInfo?index=2">取消</a> </div> </div> </div> </div> </div> </div> </div> </div> <!--页面主体 end--> </div> </body> </html>