Php Yii2更新个人资料照片

我这里有一个编辑个人资料页面，用户可以在其中更改他/她的个人资料照片/头像

显示的化身是当前用户的照片（当然），当我单击更新化身按钮时，用户可以选择图像，然后所选图像将预览替换当前用户化身

以下是我认为的代码：

<div class="fileUpload btn btn-warning">
    <span>Update Avatar</span>
    <input type="file" accept="image/*" onchange="loadFile(event)" class="upload"/>
</div>
<script>
    var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

更新头像
var loadFile=函数（事件）{
var output=document.getElementById（'output'）；
output.src=URL.createObjectURL（event.target.files[0]）；
};

问题是，每当我点击表单末尾的更新按钮时，化身都不会改变。我知道这是因为它都在前端。如何获取新选择的图像并将其保存到数据库？或者除此之外还有其他实现吗

顺便说一句，我选择这种方法是因为我想在选择之前和之后预览图像。我尝试了Kartik的

FileInput

小部件，但我不知道在插件中放置

onchange=“loadFile（event）”

事件的位置

如果您需要更多的代码，如我的动作控制器或模型，请告诉我

---

在这件事上我真的需要帮助

我不知道你是否找到了解决办法

只要用户选择图片，就可以将图片保存在目录中，将文件名保存在DB表中

用户选择图片后，使用此小部件开始上传图片。此小部件呈现

用法：

查看

use dosamigos\fileupload\FileUploadUI;

<?= FileUploadUI::widget([
        'model' => $model,
        'attribute' => 'profile_pic',
        'url' => ['user-profile/upload-profile-picture', 'id' => $model->id],
         'gallery' => false,
         'fieldOptions' => [
             'accept' => 'image/*',
         ],
         'clientOptions' => [  
             'maxFileSize' => 2000000,
             'autoUpload' => true,
          ],
          'clientEvents' => [
              'fileuploaddone' => 'function(e, data) {
                                      jQuery(".fb-image-profile").attr("src",data.result);
                                  }',
              'fileuploadfail' => 'function(e, data) {
                                      alert("Image Upload Failed, please try again.");
                                  }',
          ],
]);
?>

型号

public function getProfilePictureFile()
{
    return isset($this->profile_pic) ? Yii::$app->params['uploadPath'] . 'user/profile/' . $this->profile_pic : null;
}

public function getProfilePictureUrl()
{
    // return a default image placeholder if your source profile_pic is not found
    $profile_pic = isset($this->profile_pic) ? $this->profile_pic : 'default_user.jpg';
    return Yii::$app->params['uploadUrl'] . 'user/profile/' . $profile_pic;
}

/**
* Process upload of profile picture
*
* @return mixed the uploaded profile picture instance
*/
public function uploadProfilePicture() {
    // get the uploaded file instance. for multiple file uploads
    // the following data will return an array (you may need to use
    // getInstances method)
    $image = UploadedFile::getInstance($this, 'profile_pic');

    // if no image was uploaded abort the upload
    if (empty($image)) {
        return false;
    }

    // store the source file name
    //$this->filename = $image->name;
    $ext = end((explode(".", $image->name)));

    // generate a unique file name
    $this->profile_pic = Yii::$app->security->generateRandomString().".{$ext}";

    // the uploaded profile picture instance
    return $image;
}

除此之外，您还可以使用教程了解图片上传中的更多详细信息

---

我希望这能帮助您解决文件上传方面的问题。

我不知道您是否找到了解决方案

只要用户选择图片，就可以将图片保存在目录中，将文件名保存在DB表中

用户选择图片后，使用此小部件开始上传图片。此小部件呈现

用法：

查看

use dosamigos\fileupload\FileUploadUI;

<?= FileUploadUI::widget([
        'model' => $model,
        'attribute' => 'profile_pic',
        'url' => ['user-profile/upload-profile-picture', 'id' => $model->id],
         'gallery' => false,
         'fieldOptions' => [
             'accept' => 'image/*',
         ],
         'clientOptions' => [  
             'maxFileSize' => 2000000,
             'autoUpload' => true,
          ],
          'clientEvents' => [
              'fileuploaddone' => 'function(e, data) {
                                      jQuery(".fb-image-profile").attr("src",data.result);
                                  }',
              'fileuploadfail' => 'function(e, data) {
                                      alert("Image Upload Failed, please try again.");
                                  }',
          ],
]);
?>

型号

public function getProfilePictureFile()
{
    return isset($this->profile_pic) ? Yii::$app->params['uploadPath'] . 'user/profile/' . $this->profile_pic : null;
}

public function getProfilePictureUrl()
{
    // return a default image placeholder if your source profile_pic is not found
    $profile_pic = isset($this->profile_pic) ? $this->profile_pic : 'default_user.jpg';
    return Yii::$app->params['uploadUrl'] . 'user/profile/' . $profile_pic;
}

/**
* Process upload of profile picture
*
* @return mixed the uploaded profile picture instance
*/
public function uploadProfilePicture() {
    // get the uploaded file instance. for multiple file uploads
    // the following data will return an array (you may need to use
    // getInstances method)
    $image = UploadedFile::getInstance($this, 'profile_pic');

    // if no image was uploaded abort the upload
    if (empty($image)) {
        return false;
    }

    // store the source file name
    //$this->filename = $image->name;
    $ext = end((explode(".", $image->name)));

    // generate a unique file name
    $this->profile_pic = Yii::$app->security->generateRandomString().".{$ext}";

    // the uploaded profile picture instance
    return $image;
}

除此之外，您还可以使用教程了解图片上传中的更多详细信息

---

我希望这有助于解决您在文件上传方面的问题。

我正在尝试使用此实现，除了用于列出上传文件的返回回调之外，一切似乎都正常。敬请协助，返回回拨是否为空？您是否正确设置了所有变量？我正在尝试使用此实现，除了用于列出上载文件的返回回调之外，一切似乎都正常。敬请协助，返回回拨是否为空？您是否正确设置了所有变量？