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')); 
     } 

    } 
} 

希望這將有助於有人在相同的位置，因爲我是。