问题描述

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":"水电费第三方"}

解决方案

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

解决方案二：

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

解决方案三：

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

        $.ajax({        url : "",
                       type : "post",
                       dataType : "json",
                       data : $("#form").serialize();,
                       success : function(result) .......