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

Please refer here first

问题

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

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

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

但是当我们在ajax请求中调试相同的内容时，我们只获得$_POST个值，我们得到$_FILES为NULL。这导致我们得出结论：$_FILES数据不是由我们的上述代码在ajax请求中发送的。

解决方案

我们需要使用FormData的JavaScript。

它做了什么？

简单来说，它会将需要上传到data param的文件的所有必要信息添加到$.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>

<强>测试

现在按print_r()进行PHP代码中的ajax请求和调试，如上所示，您会注意到$_FILES不是NULL并且它包含所有文件（需要上传的）数据。如果设置了，您可以使用move_uploaded_file()功能上传

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

Referece 1

Referece 2

Referece 3

Answer 2

使用 FormData 获取文件/图像类型数据的实例

$( '#my-form' )
  .submit( function( e ) {
    $.ajax( {
      url: 'http://host.com/action/',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

在yii2中上传Ajax文件

2 个答案: