在 Yii2 中通过 Ajax 上传不包括文件

我正在尝试通过 Ajax 请求上传图像，似乎遇到了类似的问题这个问题 https://stackoverflow.com/questions/32055274/upload-ajax-file-in-yii2但它没有答案。我不确定它们是否完全相同，因此我将在此处发布我能找到的所有详细信息，并希望更多详细信息可以帮助某人找到答案。

我从我的代码中解释了以下内容（删除了很​​多我认为与这个问题无关的内容），因此您看到的任何拼写错误可能只是我更改了下面的代码。

我的模型中包含以下内容：

use yii\web\UploadedFile;

...

class Image extends \yii\db\ActiveRecord
{
    public $imageFile;

    public function rules()
    {
        return [
            [['imageFile'], 'file', 'skipOnEmpty' => true, 'extensions' => 'png, jpg'],
        ];
    }

    public function upload()
    {
        if ($this->validate()) {
            $this->imageFile->saveAs('uploads/' . $this->imageFile->baseName . '.' . $this->imageFile->extension);
            return true;
        } else {
            return false;
        }
    }

这是我的视图文件的一部分：

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

以及视图中的 Ajax

$('form').on('beforeSubmit', function(e) {
    var form = $(this);
    $.post(form.attr('action'), form.serialize()).done(function(result) {
        console.log(result)
    });
    return false; // Prevent default form submit action
});

我的控制器中有以下内容

use yii\web\UploadedFile;

...

public function actionUpload()
{
    $model = new Image();

    if (Yii::$app->request->isAjax) {
        $model->load(Yii::$app->request->post());
        $model->imageFile = UploadedFile::getInstance($model, 'imageFile');
        if ($model->upload()) {
            $model->save(); // To save the title to the database
            Yii::$app->getSession()->addFlash('success', 'Image uploaded');
            return $this->redirect(['index']);
        }
    }

    Yii::$app->response->format = Response::FORMAT_JSON;
    return ['return' => 'just me testing here'];
}

上面的 Ajax 只会将标题保存到数据库中，而不会上传文件。如果我将所有内容转换为标准发布请求，我就可以使其全部正常工作（标题将保存到数据库，图像将上传到正确的目录）。如果我围绕各种视图、模型和控制器进行调试，看起来我只是没有通过 Ajax 请求获取 imageFile。这$model->load(Yii::$app->request->post());加载通过 Ajax 提交的标题，那么为什么不同时提取文件呢？我想也许$model->imageFiles = UploadedFile::getInstances($model, 'imageFiles');将是提取 Ajax 提交的文件的部分，但它似乎也没有得到我需要的东西。作为测试，我什至尝试将 imageFile 属性视为纯文本并将其分配给另一个要写入的数据库属性，并且效果很好。因此，它似乎已正确包含在模型中，只是没有与 Ajax 提交一起发送。

谁能告诉我如何在 Yii2 中通过 Ajax 提交表单，包括所选文件？

问题

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请求中发送数据。

解决方案

我们需要使用FormData https://developer.mozilla.org/en/docs/Web/API/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 https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload

参考2 https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously

参考文献3 https://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php