Yii AJAX 文件上传

jdzmm42g  于 2022-11-09  发布在  其他
关注(0)|答案(3)|浏览(190)

我需要上传图像与 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,那么我有两个testlogo字段-图像上传。如果我点击ajaxSubmitButton,那么我只有test字段,logo是空的。什么是解决方案?
PS:我需要非扩展解决方案。

arknldoa

arknldoa1#

默认情况下,你不能用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");
        }
    });
}

将Model更改为您的模型名称,这样就可以了。而且现在您可以将任何数据附加到FormData中,它将在$_POST中传递,而您的文件将在$_FILES中传递。小心点,我记得这种方法在ie7和ie8上不起作用。

3z6pesqy

3z6pesqy2#

根据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进行了更改。

tsm1rwdh

tsm1rwdh3#

一种你不需要自己调用$. 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);
    }
});

相关问题