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){
                //预读本地文件示例，不支持ie8
                obj.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){
                //预读本地文件示例，不支持ie8
                obj.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("")，就可以拿出来！共勉！