upload上传,附加参数,无法传递到后台!

提问 未结
2 100
张三三儿
悬赏:30飞吻
版本:layui 浏览器:
后台无法取到 data: { Id: $('#classid').val(), Name: $('#imageName').val() } 中的Name参数。

HTML code:
<form class="layui-form">
<input type="hidden" id="imageName" value="" />
<input type="hidden" id="classid" value="@Model" />
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>添加三级栏目封面</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">栏目名称</label>
<div class="layui-input-block">
<input type="text" name="Name" lay-verify="Name" placeholder="请输入三级栏目名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">栏目封面</label>
<button type="button" class="layui-btn " id="images">
<i class="layui-icon"></i>上传图片
</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="imgUpload" src="" alt="" height="100" width="100">
<p id="demoText"></p>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="btnSave" id="btnSave">立即提交</button>
</div>
</div>
</form>

js code
<script type="text/javascript">
layui.use(['upload', 'layer', 'form'], function () {
var $ = layui.jquery;
var upload = layui.upload;
var layer = layui.layer;
var form = layui.form;
//执行实例
var uploadInst = upload.render({
elem: '#images' //绑定元素
, url: '/level/upload3' //上传接口
, accept: 'images'
, exts: 'jpg|png|jpeg'
, method: 'post'
, auto: false
, bindAction: '#btnSave'
, data: { Id: $('#classid').val(), Name: $('#imageName').val() }
, size: 500 //上传最大为500KB
, done: function (res) {
//上传完毕回调
console.log(res);
if (res.status == 'ok') {
var demoText = $('#demoText');
demoText.html('<span style="color:#5FB878;">上传成功</span>');
$('#imgUpload').attr('src', res.data);
layer.msg('上传成功', { icon: 1 });
} else {
layer.msg('上传失败!', { icon: 2 });
}
}
, error: function (data) {
//console.log(data);
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span><a class="layui-btn layui-btn-mini demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
//自定义验证规则
form.verify({
Name: function (value) {
if (value.length < 2) {
return '标题至少得2个字符';
}
}
, content: function (value) {
layedit.sync(editIndex);
}
});
//监听提交
form.on('submit(btnSave)', function (data) {
console.log(JSON.stringify(data.field));
$('#imageName').val(data.field.Name);
return false;
});
});
</script>
回帖
  • 鈊痛
    4天前
    仔细看了下代码,发现你的上传按钮和表单提交按钮是同一个。不管他先执行哪一个,根据你的代码逻辑都是有错的。建议上传单独做出一个按钮或者选择完后直接自动上传,不要和表单提交混用。
    0 回复
  • jovien
    4天前
    好像目前的UPLOAD组件里的DATA 无法动态获取参数值
    0 回复