How to upload multiple images in Tbactiveform?Please any one can share the working snippet.
In active form:
Mulitiple image with preview option:
Javascript:(for preview the image):
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
var image = theFile.name;
span.innerHTML =
["<span style='position:relative'><img class='thumb' style='display:inline-block;' src="+e.target.result+" title="+escape(theFile.name)+"/></span>"].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById(‘files’).addEventListener(‘change’, handleFileSelect, false);
view:(form)
<div style="">
<?php
$this->widget('CMultiFileUpload', array('name'=>'picture[ ]',
'model'=>$model,
'accept'=>'jpg|gif|png|jpeg',
'options'=>array(),
'denied'=>'File is not allowed',
'id'=>'files',
'htmlOptions'=>array('multiple'=>'multiple'),
));
?>
[size=2] </div>[/size]
<div id="list"></div>
In controller:
public function actionCreate()
{
$model = new model;
if(isset($_POST['UserGallery'])) //to check whether the usergallery variables present or not
{
$model->attributes=$_POST['UserGallery'];
$images = CUploadedFile::getInstancesByName('uploaded_picture');
if (isset($images) && count($images) > 0) {
foreach ($images as $image) {
if ($image->saveAs(Yii::app()->basePath.'/../images/imagepath here/'.$image->name)) {
$model->setIsNewRecord(true);
$model->pic_name = $imp;
$model->id = null;
$model->save();
}
$this->redirect($this->createUrl('picture/view'));
}
$this->render('create',array(
'model'=>$model,
)); //render the form
}
I think this is what u exactly asking …