Yii使用Ajax上传文件 - 传递数据数组（formData）

Question

我一直抨击这一段时间，并且似乎一次性推进小步骤。我需要为用户提供一种通过Ajax上传文件的方式。我已经看到需要使用formData才能传递文件本身。使用这两个问题作为参考： Uploading file in Yii using ajax Yii ajax file upload

我有我的视图下面的代码页：

<?php 
$form=$this->beginWidget('CActiveForm', array(
    'id'=>'post-form', 

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


echo '<div class="columns small-5">' . $form->fileField($upload, 'image') . '</div>'; 
echo $form->error($upload, 'image'); 
echo CHtml::button("(+)",array('title'=>"Topic",'onclick'=>'js:upload_file(this);')); 


$this->endWidget(); ?> 

<script> 
function upload_file(){ 
var fd = new FormData(); 
var e = document.getElementById("UploadedFiles_image"); 
fd.append("UploadedFiles[image]", $(e)[0].files[0]); 

$.ajax({ 
    url: 'UploadInstallPhoto', 
    type: 'POST', 
    cache: false, 
    data: fd, 
    datatype: 'json', 
    processData: false, 
    contentType: false, 
    success: function (data) { 

    }, 
    error: function() { 
     alert("ERROR in upload"); 
    } 
}); 
} 
</script> 

我在控制器下面的代码：

if(Yii::app()->request->isAjaxRequest) 
    { 

     $upload = new UploadedFiles; 

     $upload->attributes = $_POST['UploadedFiles']; 

     $file = CUploadedFile::getInstance($upload,'image'); 

     $pi = pathinfo($file); 

     $upload->name = $pi['filename']; 
     $upload->ext = $pi['extension']; 
     $upload->acc_id = $id; 
     $upload->type_id = 1; 
     $upload->date_uploaded = date('Y-m-d'); 
     if($upload->save()) 
     { 
      $file->saveAs(Yii::app()->params['uploadFiles'] . $upload->id . '.' . $pi['extension']); 
      Yii::app()->user->setFlash('success',Yii::t('flash','flash.accounts.successful_upload')); 
     } 

    } 

有了上面的代码，我现在可以做ajax文件提交和这个我按预期工作。我现在遇到的问题是该文件被放置到一个文件夹中，并创建数据库中的条目。在数据库中，我引用个人帐户，以便可以在该用户的帐户上看到该文件。

我需要能够做的是通过一组数据与AJAX POST即

data: {file: fd, id: id} 

然而，当我改变行使用数组没有数据公布。请有人建议一个可能的修补程序或我可以传递多个值，包括文件值。

Answer 1

这是为我工作的解决方案。我现在可以通过Ajax上传文件，并传递多个变量以及文件。

这里是我的查看页面代码：

<?php 
    $form=$this->beginWidget('CActiveForm', array(
     'id'=>'post-form', 
     'htmlOptions' => array('enctype' => 'multipart/form-data'), 
     )); 


    echo '<div class="columns small-5">' . $form->fileField($upload, 'image') . '</div>'; 
    echo $form->error($upload, 'image'); 
    echo CHtml::button("(+)",array('title'=>"Topic",'onclick'=>'js:upload_file(this);')); 


    $this->endWidget(); 
?> 

<script> 
function upload_file(){ 
    var fd = new FormData(); 
    var e = document.getElementById("UploadedFiles_image"); 
    fd.append("UploadedFiles[image]", $(e)[0].files[0]); 
    fd.append("UploadedFiles[acc_id]", <?php echo $model->account_id; ?>); //This lines appends the required ID, thanks to Adeneo 

    $.ajax({ 
     url: 'UploadInstallPhoto', 
     type: 'POST', 
     cache: false, 
     data: fd, 
     datatype: 'json', 
     processData: false, 
     contentType: false, 
     success: function(data){ 

     }, 
     error: function(){ 
      alert("ERROR in upload"); 
     } 
    }); 
} 
</script> 

这里是我的控制器代码：

public function actionUploadInstallPhoto() 
{ 
    if(Yii::app()->request->isAjaxRequest) 
    { 
     $upload = new UploadedFiles; 

     $upload->attributes = $_POST['UploadedFiles']; 

     $file = CUploadedFile::getInstance($upload,'image'); 

     $pi = pathinfo($file); 

     $upload->name = $pi['filename']; 
     $upload->ext = $pi['extension']; 
     $upload->acc_id = $_POST['UploadedFiles']['acc_id']; 
     $upload->type_id = Yii::app()->params['installPhoto']; 
     $upload->date_uploaded = date('Y-m-d'); 
     if($upload->save()) 
     { 
      $file->saveAs(Yii::app()->params['uploadFiles'] . $upload->id . '.' . $pi['extension']); 
      Yii::app()->user->setFlash('success',Yii::t('flash','flash.accounts.successful_upload')); 
     } 

    } 
} 

希望这将有助于有人在相同的位置，因为我是。