在yii2中上传Ajax文件

Question

我想在yii2框架中使用Ajax上传文件这是我的代码,但是在控制器"get Instance"中因为序列化数据而返回null; 我怎样才能做到这一点？

这是我的控制器:

<?php
public function actionUpdate($id)
    {
            $model = Signature::findOne([
                'user_id' => $id,
            ]);
            if ($model->load(Yii::$app->request->post())) {
                $model->file = UploadedFile::getInstance($model, 'file');
                $model->file->saveAs('uploads/signature/' . $model->user_id . '.' . $model->file->extension);
                $model->url = 'uploads/signature/' . $model->user_id . '.' . $model->file->extension;

                if ($model->save()) {
                    echo 1;
                } else {
                    echo 0;
                    echo $model->file;
                }
            } else {
                return $this->renderAjax('update', [
                    'model' => $model,
                ]);
            }
    }
?>

这是我的脚本代码我无法在控制器中获取我的文件,它返回null

<?php $script = <<<JS

$('form#{$model->formName()}').on('beforeSubmit', function(e)
{
    var \$form = $(this);

    $.post(
    \$form.attr("action"),
    \$form.serialize(),

    )
        .done(function(result){
        if(result == 1)
        {
            $(document).find('#update_signature_modal').modal('hide');
            $.pjax.reload({container:'#branchesGrid'});
            //alert();
        } else {
            alert(result);
        }
        }).fail(function()
        {
            console.log("server error");
        });
        return false;
});

JS;
$this->registerJs($script);
?>

Answer 1

请先在这里参考

问题

ajax中的问题是$_FILES细节不是在异步请求中发送的.当我们在没有ajax请求的情况下提交填充的表单并在PHP的后端进行调试时

echo '<pre>';
print_r($_FILES); 
print_r($_POST); 
echo '</pre>';
die; 

然后我们成功获得$_FILES和$_POST数据.

但是当我们在ajax请求中调试相同的东西时,我们只得到$_POST值,我们得到$_FILES了NULL.这导致我们得出结论,$_FILES我们的上述代码不会在ajax请求中发送数据.

解决方案

我们需要使用FormDataJavaScript.

它有什么作用？

简单地说,它增加了需要被上传到文件的所有必要的信息dataPARAM在$.ajaxOR填满$_FILES以及所有$_POST数据,即非文件输入如字符串号码等

在您的视图文件中

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?>
<?= $form->field($model, 'title') ?>
<?= $form->field($model, 'imageFile')->fileInput() ?>    
<button type="button" class="btn btn-success subm">Upload</button>
<?php ActiveForm::end(); ?>

<script>
$('.subm').click(function(e){
    var formData = new FormData($('form')[0]);
    console.log(formData);
    $.ajax({
        url: "some_php_file.php",  //Server script to process data
        type: 'POST',

        // Form data
        data: formData,

        beforeSend: beforeSendHandler, // its a function which you have to define

        success: function(response) {
            console.log(response);
        },

        error: function(){
            alert('ERROR at PHP side!!');
        },


        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
});
</script>

测试

现在通过print_r()如上所示在PHP代码中进行ajax请求和调试,您将注意到它$_FILES不是NULL并且它包含所有文件(需要上载的)数据.如果已设置,您可以使用move_uploaded_file()功能上传

这就是你通过Ajax上传文件的方式.

参考1

参考2

参考3