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

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.