我无法使用 Ajax 上传图片答案

【问题标题】：i can't upload images using Ajax我无法使用 Ajax 上传图片
【发布时间】：2015-09-19 00:05:53
【问题描述】：

我一直在尝试使用 ajax 和 bootstrap（模态）添加新产品，当我按下 save changes 按钮时，我在所有字段中都得到 Undefined index。

这是我的 ajax 代码：

$('#save').click(function(){
    var nombre = $('#nombre').val();
    var desc = $('#desc').val();
    var precio = $('#precio').val();
    var stock = $('#stock').val();
    var tipo = $('#tipo').val();
    var data = new FormData();

    jQuery.each(jQuery('#imagen')[0].files, function(i, file) {
        data.append('file-'+i, file);
    });
    var datas="nombre="+nombre+"&desc="+desc+"&precio="+precio+"&stock="+stock+"&tipo="+tipo;

    $.ajax({
        url: "php/newproduct.php",
        data: {datas, data},
        cache: false,
        contentType: false,
        processData: false,
        type: "POST"
    }).done(function( data ) {
        $('#info').html(data);
        viewdata();

        setTimeout(function() {
            $('#myModal').modal('hide');
        }, 500);

        $('.modal').on('hidden.bs.modal', function(){
            $(this).find('form')[0].reset();
        });
    });
});

【问题讨论】：

data: {datas, data}, 看起来像是无效的对象语法，应该是分号而不是逗号
为什么不将所有数据添加到FormData 对象中，或者只是使用表单初始化它？

标签： javascript php jquery ajax twitter-bootstrap

【解决方案1】：

data: {datas, data},

似乎不是正确的 javascript 语法，我认为您不能混合不同的数据对象。
您不能混合使用FormData 和 URL 编码字符串，在您的情况下，如果任何值包含 &，则事件编码不正确，您将遇到问题。

使用 AJAX 上传最简单的方法是，如果您使用 form 初始化 FormData 对象

var data = new FormData($("#form").get(0));

然后就用了

data: data,

在您的 AJAX 调用中

如果确实需要手动添加字段，需要添加到FormData对象中

data.append("nombre", nombre);
data.append("desc ", desc);
data.append("precio ", precio);
data.append("stock ", stock);
data.append("tipo ", tipo);

【讨论】：