包含图片的form表单提交方法提交方式为ajax(不需要转成base64码)
进行上传之前需要用maven导包
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
然后在spring-mvc.xml中添加配置文件
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="204800"/>
</bean>
配置方面暂时就是这样了,然后是前端方面
先写两个form表单分别为图片提交和表单信息提交
<!--该处为信息提交处,记得要写id-->
<form name="add" id="formSub">
<input type="number" name="ldmCommodityId" id="ldmCommodityId">
<br>
<input type="number" name="ldmLotteryId" id="ldmLotteryId">
</form>
<!--此处为图片信息提交处,同上要有id-->
<form id="uploadPic">
图片: <input type="file" name="storeimgsrc" id="storeimgsrc" accept="imgage/*" onchange="base64()">
</form>
<button type="submit" onclick=postInfo("url")>新增</button>
//图片预览区的div
<div style="float: right" id="imgShow" class="imgShow" hidden=true>
<img id="img_upload_show"/>
</div>
下面就是jQuery部分了(这部分的一些配置就不写出来了)
<script type="text/javascript">
//这是我自己添的图片预览方法
function base64() {
var input = document.querySelector('input[type = "file"]');
var file = input.files[0]
console.log(file);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
$("#img_upload_show").attr("src", this.result);//将转换后的编码存入src完成预览
}
}
//这是ajax提交方法
function postInfo(url) {
var formData = new FormData($("#uploadPic")[0]);
var json = JSON.stringify($("#formSub").serializeArray());
formData.append("json", json)
$.ajax({
type: "POST",
url: url,
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (response) {
alert(data)
console.log(data);
if (data == "success") {
alert("成功");
} else {
alert("失败";
}
}
})
}
</script>