javascript - 无法使用 AjaxSubmitButton 上传图片

标签 javascript jquery html ajax yii

我是 yii 和 ajax 的新手。我想从弹出窗口上传图片(个人资料图片)。我使用了 Ajax 提交按钮。
但是文件没有传递给 Controller ​​。
我在 View 中的代码是:

<?php 
  $form = $this->beginWidget('CActiveForm', array(
    'id' => 'profile-update-form',
    'enableAjaxValidation' => true,
    'enableClientValidation' => true,
    'action' => array('user/profileupdate'),
    'htmlOptions'=>  array('class' =>'form-horizontal')
  ));
?>
<?php
  $model = User::model()->findByPk(Yii::app()->user->id);
  $profile=UserProfile::model()->findByAttributes(array('user_id'=>$model->id));
  if(!$profile)
    $profile=new UserProfile;
  ?>

<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label text10">About me</label>
  <div class="col-sm-8">
    <?php echo $form->textArea($profile, 'about_me', array('class' => 'form-control form02')); ?>
  </div>
  <div class="req"> <?php echo $form->error($profile, 'about_me'); ?> </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label text10">City</label>
  <div class="col-sm-8">
    <?php echo $form->textField($profile, 'city', array('class' => 'form-control form02', 'id' => 'inputCity')); ?>
  </div>
  <div class="req"> <?php echo $form->error($profile, 'city'); ?> </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label text10">Phone</label>
  <div class="col-sm-8">
    <?php echo $form->textField($profile, 'phone', array('class' => 'form-control form02', 'id' => 'inputPhone')); ?>
  </div>
  <div class="req"> <?php echo $form->error($profile, 'phone'); ?> </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label text10">Profile Picture</label>
  <div class="col-sm-8">
    <?php echo $form->fileField($profile,'profile_picture'); ?>
    <?php 
      $this->widget('CMultiFileUpload', array(
        'name' => 'images',
        'accept' => 'jpeg|jpg|gif|png',  // useful for verifying files
        'duplicate' => 'Duplicate file!', // useful, i think
        'denied' => 'Invalid file type', // useful, i think
      ));
    ?>
  </div>
  <div class="req"> <?php echo $form->error($profile, 'profile_picture'); ?> </div>
</div>
<div class="form-group">
  <label for="inputEmail3" class="col-sm-4 control-label text10"></label>
    <div class="col-sm-8">
      <span>
        <?php
          echo CHtml::ajaxSubmitButton('Save', CHtml::normalizeUrl(array('user/profileupdate?rand=' . time())), array(
             'dataType'=>'json',
             'type'=>'post',
             'success'=>'function(data) {
                $("#AjaxLoader1").hide();  
                if(data.status=="success"){
                  $("#formResult1").html("profile settings changed successfully.");
                  $("#profile-update-form")[0].reset();
                } else {
                  $.each(data, function(key, val) {
                    $("#profile-update-form #"+key+"_em_").text(val);                                                    
                    $("#profile-update-form #"+key+"_em_").show();
                  });
                }       
              }',                    
             'beforeSend'=>'function(){                        
               $("#AjaxLoader1").show();
             }'
           ), array(
             'id' => 'profile-update', 'live' => false, 'class' => 'btn btn-s-md btn-info')
           );
         ?>
       ...

我的 Controller 中的代码是:

public function actionprofileupdate() {
  $profile = UserProfile::model()->findByAttributes(array('user_id' => Yii::app()->user->id));
  if (!$profile) {
    $profile = new UserProfile;
    $profile->create_time = time();
    $profile->update_time = time();
  }
  if (isset($_POST['UserProfile'])) {
    $profile->attributes = $_POST['UserProfile'];
    $profile->about_me = $_POST['UserProfile']['about_me'];

    $images = CUploadedFile::getInstance($profile,'profile_picture');
    //  print_r($_POST);
    //   print_r($_FILES);
    //  print_r($images);
    //   exit();
    if (isset($images)) {
      if(!is_dir(Yii::getPathOfAlias('webroot').'/images/profilepic/'. 'quy')) {
        mkdir(Yii::getPathOfAlias('webroot').'/images/profilepic/'. $profile->profile_picture);
        // the default implementation makes it under 777 permission, which you could possibly change recursively before deployment, but here�s less of a headache in case you don�t
      } 
      foreach ($images as $image => $pic) {
        echo $pic->name;if ($pic->saveAs(Yii::getPathOfAlias('webroot').'/images/profilepic/'.$pic->name)) {
          $profile->profile_picture = $pic->name;
        }
      }
      $profile->user_id = Yii::app()->user->id;
      $profile->update_time = time();
      $valid = $profile->validate();
      $error = CActiveForm::validate(array($profile));
      if ($error == '[]') {
        $profile->save(false);
        echo CJSON::encode(array('status' => 'success'));
        Yii::app()->end();
      } else {
        $error = CActiveForm::validate(array($profile));
        if ($error != '[]')
          echo $error;
          Yii::app()->end();
          exit();
      }
    }
  }
}

请有人帮我解决这个问题。
当我使用普通提交按钮时,文件正在传输到 Controller ,但是当使用 AjaxSubmitButton 时,字段 profilepic 被发送为空白。

最佳答案

请尝试在 html 选项中指定 enctype

'htmlOptions'=>array('enctype'=>'multipart/form-data'),

关于javascript - 无法使用 AjaxSubmitButton 上传图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21226145/

相关文章:

javascript - 如何使这个 JS 函数异步?

javascript - HTML:jQuery:DOM 操作

javascript - react : Don't use keyUp for onChange events

javascript - 在 ng-repeat 表中插入一个独立的范围变量值

html - 为什么我的图像没有内联显示

jquery - 删除所有空 p 的 <p></p> 后检查 div.html() 长度

jquery - 快速滚动正在破坏 jQuery 淡入功能

jquery - 单击该行中的按钮时使用 jQuery 获取行 ID

javascript - 删除 Bootstrap 4 Collapse 元素的过渡和延迟

html - 无法点击 Logo ,CSS 问题