在 yii2 中上传 Ajax 文件

我想在 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);
?>

请先参考这里

问题

ajax 的问题是什么$_FILES详细信息不会在异步请求中发送。 当我们在没有ajax请求的情况下提交填写的表单并在PHP后端进行调试时

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

然后我们成功得到$_FILES and $_POST data.

但是当我们在ajax请求中调试同样的事情时，我们只得到$_POST值，我们得到$_FILES as NULL。这使我们得出结论：$_FILES我们上面的代码没有在ajax请求中发送数据。

解决方案

我们需要使用FormDataJavaScript 的。

它有什么作用？

简而言之，它添加了需要上传的文件的所有必要信息data参数输入$.ajax或填写$_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>

Testing

现在发出 ajax 请求并在 PHP 代码中进行调试print_r()如上图所示，你会注意到$_FILES不为NULL，包含所有文件（需要上传）数据。如果已设置，您可以使用上传move_uploaded_file() funtion

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

参考文献1

参考2

参考文献3