Yii ajax文件上传

Posted 2021-05-06

我需要使用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：我需要非扩展解决方案。

答案

默认情况下，您无法使用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，因为我记得。

另一答案

根据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。