難得丿糊塗灬通过本文主要向大家介绍了使用Ajax进行文件与其他参数的上传功能(java开发)等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
文件上传：
记得前一段时间，为了研究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 id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize"> <value>104857600</value> </property> <property name="maxInMemorySize"> <value>4096</value> </property> </bean></div>
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 name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>发布资讯</title>
<script type="text/javascript" src="${ctx}/resources/new_js/jquery.js"></script>
<script type="text/javascript" src="${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 class="body_bg">
<div class="main">
<!--页面主体 start-->
<div class="main_content">
<div class="later_index clear wrap">
<div class="later_right fr">
<div class="roll_parent" id="roll_parent">
<div class="scroll_parent" id="scroll_parent">
<div class="scroll" id="scroll"></div>
</div>
<div class="roll_son" id="roll_son">
<div class="later_content later_content1">
<div class="release_name">
<h3>
<span>发布资讯</span>
</h3>
</div>
<div class="issue_content">
<form action="" id="form1" method="post" enctype="multipart/form-data">
<table class="issue_tab">
<tbody>
<tr>
<td><p><i>*</i><strong>标题</strong></p>
</td>
</tr>
<tr>
<td><input id="title_input_info" name="title_input_info" type="text" placeholder="最多可以输入40个字" type="text" maxlength="40"/>
<!-- <span class="colse"></span> -->
<p class="colse_tip"></p>
<!-- <p class="colse_tip" id="title_p_info" style="display:hidden;">请选择标题！</p> -->
</td>
</tr>
<tr>
<td><p><i>*</i><strong>摘要</strong></p></td>
</tr>
<tr>
<td><input name="summary_input_info" id="summary_input_info" type="text" placeholder="最多可以输入100个字" type="text" maxlength="100" />
<p class="colse_tip"></p></td>
</tr>
<tr>
<td><p><i>*</i><strong>内容</strong></p>
</td>
</tr>
<tr>
<td><textarea name="content_textarea_info" id="content_textarea_info"></textarea>
<p class="colse_tip"></p></td>
</tr>
<tr>
<td><p><i>*</i><strong>选择行业</strong></p>
<p class="colse_tip" id="type_p_info" style="display:hidden;">请选择行业！</p></td>
</tr>
<tr>
<td>
<div class="next_select select_width select_bg" id="next_select0">
<span id="type_span_info">请选择</span>
</div>
<div class="select_box select_top select_width" data-id="" id="select_box0">
<ul>
<li class="curr" 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" class="isue_inp_btn" value="添加图片"/>
<input type="text" id="issue_input_text" class="issue_text" />
<input type="file" id="file" name="file" class="issue_file" onchange="javaScript:validate_img(this)" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="financial_pro_icon">
<div class="financial_pro_icon_l issue_btn1">
<a href="javaScript:save();">发布</a>
</div>
<div class="financial_pro_icon_r issue_btn1">
<a href="${ctx}/info/gotoInfo?index=2">取消</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div