layui实现form表单同时提交数据和文件的代码

1.jsp页面·html代码<%--用户注册的弹出框--%><divid="userDiv"style="display:none;"><formclass="

1.jsp页面

·html代码

<%--用户注册的弹出框--%>
<div id="userDiv" style="display: none;">
 <form class="layui-form" id="userForm" lay-filter="deptForm" enctype="mutipart/form-data">
 <input type="hidden" name="id">
 <div class="layui-form-item">
 <div class="layui-inline">
 <label class="layui-form-label" >用户名</label>
 <div class="layui-input-inline">
 <input type="text" name="name" placeholder="6~18位，请使用数字或字母" lay-verify="checkName|username|required" class="layui-input">
 </div>
 </div>
 <div class="layui-inline">
 <label class="layui-form-label">密码</label>
 <div class="layui-input-inline">
 <input type="password" id="password" name="password" lay-verify="required" class="layui-input">
 </div>
 </div>
 <div class="layui-inline">
 <label class="layui-form-label">确认密码</label>
 <div class="layui-input-inline">
 <input type="password" lay-verify="required|checkPwd" class="layui-input">
 </div>
 </div>
 <%--图片上传功能--%>
 <div>
 <button type="button" name="url" class="layui-btn" id="test1">上传头像</button>
 <img class="layui-upload-img" id="photo" width="100" height="100">
 <p id="demoText"></p>
 </div>
 <hr/>
 <div class="layui-form-item" id="btn">
 <div class="layui-input-block">
 <button id="get" lay-filter="reg" class="layui-btn btn-submit" type="button" lay-submit="">立即注册</button>
 <button type="reset" class="layui-btn layui-btn-primary">重置</button>
 </div>
 </div>
 </div>
 </form>
</div>

·js代码

//上传头像的方法
 var uploadInst = upload.render({
 elem: '#test1' /*根据绑定id，打开本地图片*/
 ,url: '/reg' /*上传后台接受接口*/
 ,auto: false /*true为选中图片直接提交，false为不提交根据bindAction属性上的id提交*/
 ,bindAction: '#get'
 ,drag:true
 ,auto: false
 ,choose:function(obj){
 //预读本地文件示例，不支持ie8
 obj.preview(function(index, file, result){
 $('#photo').attr('src', result); //图片链接（base64）
 });
 }
 ,done: function(res){
 //如果上传失败
 if(res.code > 0){
 return layer.msg('上传失败');
 }
 //上传成功
 }
 ,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(){
 uploadInst.upload();
 });
 }
 });
 //提交表单的方法
 form.on('submit(reg)', function (data) {
 var fd = new FormData();
 var formData = new FormData($( "#userForm" )[0]);
 $.ajax({
 cache : true,
 type : "post",
 url : "/reg",
 async : false,
 data : formData, // 你的formid
 contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
 processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
 error : function(request) {
 layer.alert('操作失败', {
 icon: 2,
 title:"提示"
 });
 },
 success : function(ret) {
 if (ret.success) {
 layer.alert('注册成功', {
 icon: 2,
 title:"提示"
 });
 layer.closeAll();
 window.location.href="/login" rel="external nofollow" ;
 } else {
 layer.alert(ret.msg, {
 icon: 2,
 title:"提示"
 });
 }
 }
 })
 });

2.后台处理

@ResponseBody
 @RequestMapping ("/reg")
 public JsonResult save(MultipartFile file, User user, HttpServletRequest request){
 try {
 String path = request.getSession().getServletContext().getRealPath("upload");
 String pathPhoto = "/upload";
 if(!file.isEmpty()){
 String name = file.getOriginalFilename();//获取接受到的图片名称
 String newFileName = UUID.randomUUID().toString().substring(0,5)+"."+ FilenameUtils.getExtension(name);
 File fi = new File(path,newFileName); //将path路径与图片名称联系在一起
 if(!fi.getParentFile().exists()){ //判断是否存在path路径下的文件夹
 fi.getParentFile().mkdirs(); //不存在创建path路径下的文件夹
 }
 file.transferTo(fi); //上传图片
 user.setImgurl(pathPhoto+"/"+newFileName); //为保存图片路径
 }
 if(!StringUtil.isEmpty(user.getName()) && !StringUtil.isEmpty(user.getPassword())){
 userService.save(user);
 }
 } catch (Exception e) {
 e.printStackTrace();
 return new JsonResult(false,e.getMessage());
 }
 return new JsonResult();
 }

以上这篇layui实现form表单同时提交数据和文件的代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。