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.