上传图片的时候如何把表单数据同时提交?

提问 已结
15 343
大大大西瓜
悬赏:20飞吻
[爱你]
var uploadInst = upload.render({
elem: '#test1'
,field:'headimg'
,url: url
,data:formData
,auto: false
//,bindAction:'#sub'
,choose: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
console.log(obj);
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}

//上传成功
}


form.on('submit(sub)', function(data){


url += $('#uploadForm').serialize().toString();
formData = data.field;
uploadInst.data = formData;
console.log(uploadInst.data);
uploadInst.upload();



formData每次提交的时候都是 初始化时的值 也就是{} 我想把表单的参数一起发过去怎么办呢, url也是不能重新赋值,所以通过url带值过去也没行得通 。 大腿有什么好方法么
回帖
  • 我的建议还是表单跟upload分开,upload组件的功能应该是尽可能的简单的,不要掺杂太多的业务进去,就是一个传图片到某个位置然后返回路径信息,form表单得到这个路径信息怎么用那个form表单的事情,比如你可能是一个员工的头像路径信息,最后提交表单也跟upload组件没啥关系,保存到字段中的就是一个路径的string,这样把功能独立起来,才不会出现要保存表单的时候得触发图片上传,如果没有修改图片还提交不了这样的怪异的窘境哈。
    0 回复
  • @岁月小偷 大腿 [泪]
    0 回复
  • url其实可以重新赋值,在before里面,你debugger一下this就知道了,可以修改this里面的属性就可以修改这个上传的接口了。url传过去估计不靠谱,数据量打的话估计url承受不了,一样的,upload可以带data,如果data里面的数据是动态的从form表单里面取到的,也是在before里面对this里面的属性进行处理,里面也有一个data,在before里面再构造这个data就可以了,后面的版本支持data在render的时候就支持动态获取值的写法,但是感觉原不如在before里面修改方便。试试看额。
    0 回复
  • upload.render({
    elem: '#id'
    ,url: '/api/upload/' //必填项
    ,method: '' //可选项。HTTP类型,默认post
    ,data: {} //可选项。额外的参数,如:{id: 123, abc: 'xxx'}
    });
    0 回复
  • @岁月小偷 我先尝试下哈,听着有些思路了,嘿嘿嘿。
    0 回复
  • @岁月小偷 参数是以这种形式发送的 有点蒙,不太晓得后端怎么接收比较好了。
    0 回复
  • 话说这是啥[偷笑] 你不是用form监听submit了嘛,可以直接使用data.field作为upload的data要的数据就可以了觉得。
    0 回复
  • before回调函数,可以通过this.data = { xxx: xxx } 等形式赋值即可
    0 回复
  • @岁月小偷 哈哈哈 上传什么的已经解决啦,现在出现了新的困难。 我修改的时候弹出相同的form 我不重新选择一个图片的话,它不触发上传事件哦。[害羞]
    0 回复



  • 就是修改的时候,没选择图片的话,嘿嘿嘿 它不触发了。 有没有方法给它个初始文件哦~
    0 回复
  • 是不会触发的,如果触发了等于又上传了一次文件呀,没有选择文件的话应该就是一个普通的表单提交就可以了吧觉得。
    0 回复
  • var uploadInst = upload.render({
    elem: '#test1'
    ,field:'headimg'
    ,url: '#(ctx)/hr/emp/#(action)'
    ,data:formData
    ,auto: false
    //,bindAction:'#sub'
    ,choose: function(obj){
    //预读本地文件示例,不支持ie8
    obj.preview(function(index, file, result){
    $('#demo1').attr('src', result); //图片链接(base64)
    });
    }
    ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
    this.data = formData;
    }
    ,done: function(res){
    //如果上传失败
    if(res.code > 0){
    return common.warnMsg('上传失败');
    }
    layer.close(dlg);
    if('#(action)'=='insert'){
    dataTable.reload('emp_dt', {
    url: url_list,
    }, 1);
    }else{
    dataTable.reload('emp_dt', {
    url: url_list,
    where: {name: $('#name').val()}
    });
    }
    common.doneMsg();

    //上传成功
    }
    });
    我是通过上传控件把 表单输出传到后台的 如果不走的话 那我表单数据也无法提交了。 可否判断是否有文件呢。 如果我想通过 表单右上角那个《img》标签 做修改时图片的展示又该如何呢。 感觉要解决好多问题哦
    0 回复
  • @岁月小偷 [吃惊] 对呀对呀 现在好囧啊。
    0 回复
  • @岁月小偷 嘿嘿嘿 我解决啦 , 我通过一个标记位 评判的是否选择了文件 如果没选择就调用表单自己的提交。嘿嘿嘿。[害羞]
    0 回复
  • 0 回复