九啦啦(Layui文件上传附带表单相关参数)
用户投稿
•
•
阅读 142
九啦啦:Layui文件上传附带表单相关参数。

HTML
<div id="addmb" style="display:none;padding:10px;">
<form class="layui-form layui-form-pane" lay-filter="example">
<div class="layui-form-item">
<label class="layui-form-label">模板介绍</label>
<div class="layui-input-block">
<input type="text" name="title" id="mbjs" autocomplete="off" placeholder="请输入介绍" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">模板类型</label>
<div class="layui-input-block">
<input type="radio" name="roles" value="悬浮窗" title="悬浮窗">
<input type="radio" name="roles" value="微信号样式" title="微信号样式" checked="">
<input type="radio" name="roles" value="底部" title="底部">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">回传方式</label>
<div class="layui-input-block">
<input type="radio" name="hcfs" value="长按回传" title="长按回传" checked="">
<input type="radio" name="hcfs" value="复制回传" title="复制回传">
<input type="radio" name="hcfs" value="单击回传" title="单击回传">
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
<img style="width:100px;" id="demo1" src="" alt="" />
</div>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">代码块</label>
<div class="layui-input-block">
<textarea placeholder="请输入模板代码" name="code" class="layui-textarea mbdm" style="margin-top: 0px; margin-bottom: 0px; height: 273px;"></textarea>
</div>
</div>
</form>
<div class="layui-form-item">
<button class="layui-btn" id="doadd">提交</button>
</div>
</div>
JS
<script type="text/javascript">
layui.use(['upload', 'element', 'layer'], function() {
var $ = layui.jquery,
upload = layui.upload,
element = layui.element,
layer = layui.layer;
form = layui.form;
layui.$('#doadd').on('click', function() {
datafo = form.val('example'); //表单val
// alert(JSON.stringify(data));
});
//选完文件后不自动上传
upload.render({
elem: '#test8',
url: '/api/v1.Ymlogin/addmb',
auto: false, //不自动上传
// multiple: true,//多文件上传
bindAction: '#doadd', //手动提交
before: function(obj) {
//文件上传时 附带表单参数
this.data = {
'lx': datafo.roles,
'bt': datafo.title,
'code': datafo.code,
'hc': datafo.hcfs
};
},
//选择文件后预览
choose: function(obj) {
obj.preview(function(index, file, result) {
$('#test8').text('已选择');
$('#demo1').attr('src', result); //图片链接(base64)
});
},
done: function(res) {
layer.msg('上传成功');
setTimeout("layer.closeAll()", "1000");
}
});
});
</script>
随机文章
SEO教程站长导航
友情链接交换
关键词排名优化
网站内容优化
GEO培训
站长导航
友情链接交换
百度搜索“网赚联盟”即可找到本站,微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟( wangzhuan.org.cn )欢迎用户投稿,发布者:用户投稿,文章版权归作者所有,投稿文章不代表网赚联盟立场,中二少年发布为网赚联盟原创文章,转载请注明出处:https://wangzhuan.org.cn/24993.html

微信扫一扫
支付宝扫一扫