Yii ajax 文件上传答案

【问题标题】：Yii ajax file uploadYii ajax 文件上传
【发布时间】：2014-07-07 11:42:04
【问题描述】：

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

【问题讨论】：

试试这个yiiframework.com/wiki/624/…
您是否在表单小部件的 htmlOptions 中添加了 'enctype'=>'multipart/form-data'？
@deacs 是的，当然
@SujeetKumar 谢谢。不幸的是，在我的项目中我需要 ie8+
@f0rtis 哦，但是您仍然可以使用简单的 php-ajax-jquery 上传器，例如 sanwebe.com/2012/06/ajax-file-upload-with-php-and-jquery

标签： ajax file-upload yii

【解决方案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。

【讨论】：

【解决方案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 进行更改即可。

【讨论】：

【解决方案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);
    }
});

【讨论】：