javascript - 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>

我的 Controller 中有以下代码:

    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>

这是我的 Controller 代码:

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

    }
}

希望这能帮助那些和我处境相同的人。