input隐藏域和layui图片上传问题

layui上传图片时需要Button和url,表单也需要button和url,所以很多博客上写需要用js图片src进行一个操作，然后再调用js实现把图片的src给后台，但是这样的js还是很难看懂的，这里我使用input隐藏域优势，将问题隐藏一下。图片上传成功之后将图片的src保存在一个隐藏的input中，在表单提交的时候同时就将src传过去了，并且代码也很轻便简单。

前台：

<div><label class=\"label\">图片</label><!--//利用隐藏域解决了问题--><input type=\"hidden\" name=\"image\" id=\"image\"><i class=\"layui-icon layui-icon-add-circle-fine\" id=\"pic\" style=\"color: #6d638f;font-size: 25px;  margin-top:4%;\"></i><div class=\"layui-upload-list\"><img class=\"layui-upload-img\" id=\"picdemo\"name=\"picdemo\"><p id=\"demo\"></p></div></div><div><label class=\"label\">二维码</label><input type=\"hidden\" name=\"qr\" id=\"qr\"><i class=\"layui-icon layui-icon-add-circle-fine\" id=\"qrcode\" style=\"color: #6d638f;font-size: 25px;  margin-top:4%;\"></i><div class=\"layui-upload-list\"><img class=\"layui-upload-img\" id=\"codedemo\" name=\"codedemo\"><p id=\"demo1\"></p></div></div>

前台js文件

layui.use(\'laydate\', function() {var laydate = layui.laydate;laydate.render({elem: \'#ddl\',theme: \'#4d2eb3\'});});layui.use(\'upload\', function(){var $ = layui.jquery,upload = layui.upload;var uploadInst = upload.render({elem: \'#pic\' //绑定元素,url: \'/upload/\' //上传接口,before: function(obj){//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$(\'#picdemo\').attr(\'src\', result); //图片链接（base64）});},done: function(res){//如果上传失败if(res.code > 0){return layer.msg(\'上传失败\');}document.getElementById(\'image\').value=res.data;var fileupload = $(\"#image\");fileupload.attr(\"value\",res.data.src);console.log(fileupload.attr(\"value\"));},error: function(){//演示失败状态，并实现重传var demoText = $(\'#demo\');demoText.html(\'<span style=\"color: #FF5722;\">上传失败</span> <a class=\"layui-btn layui-btn-xs demo-reload\">重试</a>\');demoText.find(\'.demo-reload\').on(\'click\', function(){uploadInst.upload();});}});var uploadInst1 = upload.render({elem: \'#qrcode\' //绑定元素,url: \'/upload/\' //上传接口,before: function(obj){//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$(\'#codedemo\').attr(\'src\', result); //图片链接（base64）});},done: function(res){//如果上传失败if(res.code > 0){return layer.msg(\'上传失败\');}//上传成功document.getElementById(\'qr\').value=res.data;},error: function(){//演示失败状态，并实现重传var demoText = $(\'#demo1\');demoText.html(\'<span style=\"color: #FF5722;\">上传失败</span> <a class=\"layui-btn layui-btn-xs demo-reload\">重试</a>\');demoText.find(\'.demo-reload\').on(\'click\', function(){uploadInst1.upload();});}});});</script>

可以看到从后台data.src,该赋给了input(这里上传了两张，之后代码精简）

后台upload ，并返回src

//图片上传@RequestMapping(\"/upload\")@ResponseBodypublic Object upload(@RequestParam(value = \"file\",required = false) MultipartFile file, HttpServletRequest request, HttpServletResponse response)throws Exception{String prefix = \"\";String datestr = \"\";//保存上传OutputStream out = null;InputStream fileInput=null;try{if(file!=null){String originalName = file.getOriginalFilename();prefix=originalName.substring(originalName.lastIndexOf(\".\")+1);Date date = new Date();String uuid = UUID.randomUUID()+\"\";SimpleDateFormat simpleDateFormat = new SimpleDateFormat(\"yyyy-MM-dd\");datestr = simpleDateFormat.format(date);//上传路径String filepath = request.getServletContext().getRealPath(\"/static\")+\"/image/\" + datestr+\"/\"+uuid+\".\" + prefix;filepath = filepath.replace(\"\\\\\", \"/\");File files=new File(filepath);//打印查看上传路径System.out.println(filepath);if(!files.getParentFile().exists()){files.getParentFile().mkdirs();}file.transferTo(files);//返回json串Map<String,Object> map2=new HashMap<>();Map<String,Object> map=new HashMap<>();map.put(\"code\",0);map.put(\"msg\",\"\");map.put(\"data\",filepath);map2.put(\"src\",filepath);return map;}}catch (Exception e){}finally{try {if(out!=null){out.close();}if(fileInput!=null){fileInput.close();}} catch (IOException e) {}}Map<String,Object> map=new HashMap<>();map.put(\"code\",1);map.put(\"msg\",\"\");return map;}

map存了data 的src,可以在前台直接获取。js里看到

document.getElementById(\'image\').value=res.data;document.getElementById(\'qr\').value=res.data;

可以存到input隐藏域，表单一起，表单ajax:

<script>$(function() {$(\"#submit\").on(\'click\', function () {var layer = layui.layer;var regNumber = /^\\d+$/;var regString = /\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*/;if (document.getElementById(\'title\').value === \'\') {layer.msg(\'题目不得为空！\', {icon: 7,time:1500});return false;}if(document.getElementById(\"title\").value.length>16){layer.msg(\'题目不得超过16字！\', {icon: 7,time:1500});return false;}if (document.getElementById(\'company\').value === \'\') {layer.msg(\'公司名称不得为空！\', {icon: 7,time:1500});return false;}if (document.getElementById(\'website\').value === \'\') {layer.msg(\'应聘网址不得为空！\', {icon: 7,time:1500});return false;}if (document.getElementById(\'email\').value === \'\') {layer.msg(\'简历投递地址不得为空！\', {icon: 7,time:1500});return false;}if(!regString.test(document.getElementById(\'email\').value)){layer.msg(\'您输入的邮箱地址格式不正确\', {icon: 7,time:1500});return false;}if (document.getElementById(\'contactline\').value === \'\') {layer.msg(\'联系方式不得为空！\', {icon: 7,time:1500});return false;}if(regNumber.test(document.getElementById(\'contactline\').value)&&document.getElementById(\'contactline\').value.length!==11){layer.msg(\'电话号码需为十一位\', {icon: 7,time:1500});return false;}if(!regNumber.test(document.getElementById(\'contactline\').value)&&!regString.test(document.getElementById(\'contactline\').value)){layer.msg(\'您输入的邮箱地址格式不对\', {icon: 7,time:1500});return false;}if (document.getElementById(\'keyword\').value === \'\') {layer.msg(\'关键词不得为空！\', {icon: 7,time:1500});return false;}// var layer = layui.layer;var loadingIndex = null;var data = $(\"#form\").serialize();$.ajax({type: \"post\",url: \"/user/publishjob\",data: data,dataType: \"text\", //返回数据类型beforeSend: function () {loadingIndex =  layer.load(0, {shade: true});}, success: function(msg){if(1 == msg){layer.close(loadingIndex);layer.alert(\'您已添加成功\', {skin: \'layui-layer-lan\',closeBtn: 0,shift: 3//动画类型});document.getElementById(\"form\").reset();}else if(0 == msg){layer.close(loadingIndex);layer.msg(\'因未知原因添加未成功，请稍后再试~\', {icon: 2,time:1500});}document.getElementById(\"myform\").reset();}});});});</script>

在后台利用request.getParament(\”\”)，就可以拿出来！共勉！