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")
@ResponseBody
public 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("")，就可以拿出来！共勉！

input隐藏域和layui图片上传问题相关推荐

layui图片上传增加删除图标以及功能
layui图片上传组件是没有删除功能的,这里自己增加删除功能: //删除图标var imgX = document.createElement("img"); imgX.src = ...
thinkphp5图片上传功能+layui图片上传预览
功能:tp5图片上传+layui图片预览技能:tp5图片上传,layui 环境:thinkphp5 描述:网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传 ...
thinkphp5.1+layui图片上传（前端部分.第二种）
前台展示(未开启自动上传,要手动上传) 前端(亲测可用) <div class="layui-form-item"><fieldset class="l ...
layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...
首先,这是一个坑,大坑,网上一大堆写的云里雾里,不知所以,转了一圈,除了copy就是copy,Jesus God,花了一晚上,走通了这个坑,话不多说,直接解决 layui版本: layui-v2.5. ...
layui 图片上传 asmx C#
layui 的上传图片以及C# asmx 文件接收图片存储本地 var uploadInst = upload.render({elem: '#savetest' //绑定元素, url: '/W ...
layui 图片上传控件自定义基础参数的获取
背景今天遇到的情况是,在表格中需要针对指定的产品进行缩略图片的替换操作那么,我需要根据所赋值不同索引信息的 class进行数据获取与修改在此,进行整理(截图展示),希望能帮到有需求的道友吧 [官 ...
Layui框架实现图片上传
Layui框架实现图片上传前言: 一直以来,图片上传总是件很麻烦的事.最近在学layui,发现layui真是极大简化了各种复杂的操作,避免了繁琐的开发. layui图片上传和传统的图片上传不同,它并 ...
layui之图片上传
前言:个人转码小说网站:友书-绿色.纯净.无广告,欢迎广大小说阅读爱好者同行来本网站看小说,书友交流群:580462139(群主及管理均为资深90后程序猿哦) 前言: layui是一套非常棒的前端框架 ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...

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

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

前台：

前台js文件

后台upload ，并返回src

input隐藏域和layui图片上传问题相关推荐

最新文章

热门文章