Yii使用Ajax上传文件 - 传递数据数组(formData)
问题描述:
我一直抨击这一段时间,并且似乎一次性推进小步骤。我需要为用户提供一种通过Ajax上传文件的方式。我已经看到需要使用formData
才能传递文件本身。使用这两个问题作为参考: Uploading file in Yii using ajax Yii ajax file uploadYii使用Ajax上传文件 - 传递数据数组(formData)
我有我的视图下面的代码页:
<?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}
然而,当我改变行使用数组没有数据公布。请有人建议一个可能的修补程序或我可以传递多个值,包括文件值。
答
这是为我工作的解决方案。我现在可以通过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'));
}
}
}
希望这将有助于有人在相同的位置,因为我是。
您可以将更多的附加到formData对象,但不能真正改变它,因此它是另一个对象的一部分。 – adeneo 2014-12-01 16:33:20
@adeneo你是完全正确的。我已经能够根据需要附加带有id的fd变量。感谢您的评论,现在一切正常! – 2014-12-02 08:30:02