2 imaginecode ImagineCode 于 2016.03.08 10:25 提问

js上传图片和文字信息问题

如下图:如何把图片信息和输入表单的数据一起post到后端?

图片说明

我的写法是这样:

var uploadImg=[];//上传信息数组
$('#input-file-now').on("change",function(e){//点击上传照片事件
        funGetFiles(e);
    });
    //获取照片信息
function funGetFiles(e) {
    uploadImg=[];//清空
    var files = e.target.files || e.dataTransfer.files;
    uploadImg.push(files);
//  console.log(uploadImg);
}
 var name=$("input[id='name']").val();//获取宝贝昵称
    var year=$("select[id='year'] option:selected").val();//获取出生-年份
    var month=$("select[id='month'] option:selected").val();//获取出生-月份
    var mobile=$("input[id='mobile']").val();//获取联系方式-手机
    var qq=$("input[id='qq']").val();//获取联系方式-QQ号
    var desc=$("textarea[name='desc']").val();//获取描述文本
    var birthday=year+"."+month;//出生年月

    //提交信息
    $.each(uploadImg, function(k,v) {  
        var val=v;
        var formdata=new FormData();
        formdata.append("fileList",val);
//      var xhr=new XMLHttpRequest();
        console.log(formdata);
        var jsonData={"name":name,"birthday":birthday,"mobile":mobile,"qq":qq,"img":formdata,"desc":desc};
        jsonData=JSON.stringify(jsonData);
        console.log(jsonData);
        $.post("url",jsonData,function(data){

        });
//      funUploadFile();
    });

但是,输出的是:{"name":"司法所","birthday":"2014.4","mobile":"12321432432","qq":"12323432","img":{},"desc":"水电费第三方"}

3个回答

showbo
showbo   Ds   Rxr 2016.03.08 11:15
已采纳

post h5的formdata对象,附加数据全部放到formdata中,而不是自己组个json对象。formdata插入图片信息也不正确,你放入文件名没用,要放文件2进制数据
DEMO
html5 ajax上传文件asp.net示例

showbo
showbo 而且不能用jquery,jquery会调用param转为键值对导致数据丢失,要不你就是用jquer.form.js这个插件,可以上传文件,不支持formdata用iframe模拟
接近 2 年之前 回复
Royal_lr
Royal_lr   Ds   Rxr 2016.03.08 10:52

用一个表单包起来,提交表单就行了,,

Royal_lr
Royal_lr 回复ImagineCode: var data=$("#form").serialize(),,$.post(url,data),,post方式上传图片可能会有问题
接近 2 年之前 回复
ImagineCode
ImagineCode 刚更新了下我的写法
接近 2 年之前 回复
ImagineCode
ImagineCode 用$.post()的方式呢
接近 2 年之前 回复
ImagineCode
ImagineCode post的方式呢
接近 2 年之前 回复
daidaineteasy
daidaineteasy   Ds   Rxr 2016.03.08 11:10

ajax中将表单的序列化作为参数传递就可以了,后台获取的方式跟用普通的submit提交的表单获取方式一样。

        $.ajax({        url : "",
                       type : "post",
                       dataType : "json",
                       data : $("#form").serialize();,
                       success : function(result) .......
ImagineCode
ImagineCode 但是图片的信息并没有 并序列化传递过去 。结果如下: name:司法所 year:2015 month:2 mobile:123213213 qq:123123123 desc:水电费第三方说
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!