Question

我需要使用ajax调用上传图片。但是带有图像的POST字段始终为空。我的表格的一部分：

<div class="col-lg-6">
    <?php echo CHtml::activeFileField($model, 'logo'); ?>
    <?php echo CHtml::textField('test', 'test'); ?>
    <?php echo CHtml::submitButton('Upload'); ?>        
    <?php echo CHtml::ajaxSubmitButton('Upload ajax', '#');?>
</div>

如果我点击submitButton，那么我同时拥有test和logo字段 - 图片已上传。如果我点击ajaxSubmitButton，那么我只有test字段，logo为空。解决方案是什么？

PS：我需要非扩展解决方案。

Answer 1

默认情况下，您无法上传ajaxSubmitButton的文件。使用简单的提交或一些上传者。如果你想通过ajax上传图片，这里有一个例子：

<?php echo CHtml::link('Upload ajax', '#', array("onclick"=>"js:upload_file(this)"));?>

在你的js中：

function upload_file(){
    var fd = new FormData();
    var e = document.getElementById("Model_logo");
    fd.append( "Model[logo]", $(e)[0].files[0]);
    $.ajax({
        url: 'upload',
        type: 'POST',
        cache: false,
        data: fd,
        processData: false,
        contentType: false,
        success: function (data) { 

        },
        error: function () {
            alert("ERROR in upload");
        }
    });
}

将模型更改为您的模型名称，这将有效。此外，您现在可以将任何数据附加到FormData，它将在$ _POST中传递，而您的文件将在$ _FILES中传递。小心，这种方式对ie7和ie8不起作用，因为我记得。

Answer 2

基于 ineersa 的答案，我做了一些改进：

<?php echo CHtml::link('Upload ajax', '#', array("onclick"=>"upload_file()")); ?>

在你的js中：

function upload_file(){
    var fd = new FormData($('#model-form')[0]);
    $.ajax({
        url: 'upload',
        type: 'POST',
        cache: false,
        data: fd,
        processData: false,
        contentType: false,
        success: function (data) { 

        },
        error: function () {
            alert("ERROR in upload");
        }
    });
}

这样您就不必手动附加每个表单字段。将自动读取所有表单数据（包括文件）。只需确保根据您的表单ID更改#model-form。

Answer 3

一种不需要自己调用 $.ajax(...) 的方法。

$(document).on('ajaxBeforeSend', 'form.my-form', function (event, jqXHR, settings) {
    if ((settings.url.indexOf("js_skip") == -1) && $("form.my-form input[type=file]")[0].files.length) {
        jqXHR.abort();
        settings.cache = false;
        settings.contentType = false;
        settings.processData = false;
        settings.data = new FormData(this);
        settings.url = settings.url + "&js_skip=1";
        jqXHR = $.ajax(settings);
    }
});

Yii ajax文件上传

3 个答案: