layui 图片上传+表单提交+ Spring MVC的实例

layui 图片上传图片上传+表单提交表单提交+ Spring MVC的实例的实例

今天小编就为大家分享一篇layui 图片上传+表单提交+ Spring MVC的实例，具有很好的参考价值，希望对大家有所帮

助。一起跟随小编过来看看吧

Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!!

1.前端前端HTML：：

<div class="layui-form-item">

<label class="layui-form-label">修改头像</label>

<div class="layui-input-inline uploadHeadImage">

<div class="layui-upload-list">

<img class="layui-upload-img headImage" src="http://t.cn/RCzsdCq" id="demo1">

<p id="demoText"></p>

</div>

</div>

</div>

2.前端前端js：：

<script type="text/javascript">

layui.use(["jquery", "upload", "form", "layer", "element"], function () {

var $ = layui.$,

elem: '#headImg'

, url: '/upload/headImg'

, size: 500

, before: function (obj) {

//预读本地文件示例，不支持ie8

obj.preview(function (index, file, result) {

$('#demo1').attr('src', result); //图片链接（base64）

});

}

, done: function (res) {

/* console.log(res.data.src);*/

window.parent.uploadHeadImage(res.data.src);

var demoText = $('#demoText');

demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');

}

, error: function () {

//演示失败状态，并实现重传

var demoText = $('#demoText');

demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');

demoText.find('.demo-reload').on('click', function () {

</script>

3.页面展示：页面展示：

4.后台后台SpringMVC 接受：接受：

/**

* 个人信息上传

* @return {Result}

*/