SpringMVC ajax提交上传文件

最新推荐文章于 2021-12-07 14:42:52 发布

ly-lp

最新推荐文章于 2021-12-07 14:42:52 发布

阅读量228

点赞数

分类专栏： java web springMVC 文章标签： ajax

本文链接：https://blog.csdn.net/Michean/article/details/87193952

版权

java web springMVC 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

SpringMVC ajax提交上传文件

本文件讲述通过ajax上传文件，可以接受服务器返回信息；而非form表单直接提交。

jquery.form.js下载链接
网盘下载提取码：02te
HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body class="userpage">
<section>
   <div class="content">
   	<div class="task">
   		<div class="form">
   			<form id="inputForm" method="post" enctype="multipart/form-data">
   				<ul>
   					<li>
   						<div class="name pull-left">方式</div>
   						<div class="value pull-left">
   							<select id="urgeTaskDealEnum" name="urgeTaskDealEnum" class="handle-select">
   								<option value="">请选择</option>
   								<option value="1">方式1</option>
   								<option value="2">方式2</option>
                                   <option value="2">方式3</option>
   							</select>
   						</div>
   					</li>
   					<li>
   						<div class="name pull-left">备注信息</div>
                               <div class="textarea">
   								<input type="text" name="memo" maxlength="200" />
   							</div>
   						<div class="note"><!-- 请选择 --></div>
   					</li>
   				</ul>

   				<h3>相关附件 <span class="color-gray3">(支持多个图片、文档)</span> </h3>
   				<dl class="upload">
   					<dd>
   					   <!-- 文件选择3个文件，后台使用List对象接受即可 -->
   						<div class="upload-input">
   							<input type="file" name="files" id="files" value="" class="enclosure-file" />
   							<input type="file" name="files" id="files" value="" class="enclosure-file" />
   							<input type="file" name="files" id="files" value="" class="enclosure-file" />
   						</div>
   					</dd>
   				</dl>
   			</form>
               <div class="enclosure-btn"><input type="button" id="btn" onclick="submit();" value="确认提交" class="handle-btn" /></div>
   		</div>
   	</div>
   </div>
</section>

<script src="./resources/js/jquery-1.11.3.min.js"></script>
<script src="./resources/js/jquery.form.js"></script>
<script>
   var $submit = $("#btn");
   function submit() {
       $submit.prop("disabled", true);
       //提交表单 主要要再form中加 enctype="multipart/form-data"
       //要使用ajaxSubmit则要引入jquery.form.js
       $("#inputForm").ajaxSubmit({
           method: 'post',
           url: '/wap/urge/saveUrgeTaskDeal',
           async: false,
           success: function (message) {
               if (message.type == "success") {
                   alert(message.content);
                   window.history.back();
               } else {
                   alert(message.content);
                   $submit.prop("disabled", false);
               }
           }
       });
   }
</script>
</body>
</html>