Yii的AJAX文件上传(Yii ajax file upload)

我需要上传图像与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");
        }
    });
}

这样，您就不必给每个窗体字段中手动添加。 所有表格数据将被自动读取（包括文件）。 只要确保#model-form根据你的表单ID改变。

文章来源: Yii ajax file upload