Загрузите изображения с помощью jquery File Api

Мы используем jquery.fileApi.js для загрузки изображений в форме вместе с Yii Framework. https://rubaxa.github.io/jquery.fileapi/

Мы успешно загрузили изображения на сервер.

Вот код для загрузки файла,

<script>
var examples = [];
var imageNames = [];
</script>
<div id="multiupload">
<form class="b-upload b-upload_multi" action="<?php echo $this->createUrl('item/sellNow') ?>" method="POST" enctype="multipart/form-data">
<div class="whiteBox clearfix" id="mulUplImgParent" style="display: none;">
<ul id="sortable" class="js-files b-upload__files">
<li class="col-xs-6 col-sm-2 col-md-2 js-file-tpl b-thumb" data-id="<%=uid%>" title="<%-name%>, <%-sizeText%>">
<header class="clearfix">
<div data-fileapi="file.remove" class="b-thumb__del pull-left"></div>
<% if( /^image/.test(type) ){ %>
<div data-fileapi="file.rotate.cw" class="b-thumb__rotate pull-right"></div>
<% } %>
</header>
<div class="b-thumb__preview">
<div class="b-thumb__preview__pic"></div>
</div>
</li>
</ul>
</div>
<div class="form-group">
<div id="uploadMulImgBtn" class="btn btn-pink btn-small js-fileapi-wrapper">
<span>Browse Images</span>
<input type="file" name="filedata" />
</div>
<figure class="note"><strong>Hint:</strong> You can upload all images at once!</figure>
</div>
</form>
<script type="text/javascript">
examples.push(function() {
$('#multiupload').fileapi({
multiple: true,
url: '<?php echo $this->createUrl('item/uploadImage') ?>',
paramName: 'filedata',
duplicate: false,
autoUpload: true,
onFileUpload: function(event, data) {
imageNames.push(data.file.name);
$("#item-images").val(imageNames.join(','));
},
onFileRemoveCompleted: function(event, data) {
var removeItem = data.name;

imageNames = jQuery.grep(imageNames, function(value) {
return value != removeItem;
});
$("#item-images").val(imageNames.join(','));
},
elements: {
ctrl: {upload: '.js-upload'},
empty: {show: '.b-upload__hint'},
emptyQueue: {hide: '.js-upload'},
list: '.js-files',
file: {
tpl: '.js-file-tpl',
preview: {
el: '.b-thumb__preview',
width: 80,
height: 80
},
upload: {show: '.progress', hide: '.b-thumb__rotate'},
complete: {hide: '.progress'},
progress: '.progress .bar'
}
}
});
});
</script>
</div>

Серверный код

   public function actionUploadImage(){

$userId = Yii::app()->user->id;
$tmpFilePath = $_FILES['filedata']['tmp_name'];
$imageName = $_FILES['filedata']['name'];

$path = 'user_files/';if(is_dir($path))
{
$dir = $path.$userId;

if(!is_dir($dir))
{
mkdir($dir,0777);
}

$subDir = $dir . '/temp';

if(!is_dir($subDir))
{
mkdir($subDir,0777);
}

$imagePath = "$subDir/$imageName";

move_uploaded_file($tmpFilePath, "$subDir/$imageName");

$image = new Image($imagePath);

$image->resize(190, 190);
$image->save();

$jsonResponse = array('imageName' => $imageName,'imagePath' => $imagePath);

echo CJSON::encode($jsonResponse);
}//var_dump($_FILES);
//var_dump($_POST);die;
}

У нас возникают проблемы, как снова загрузить эти изображения в форму.

Мы хотим показать загруженные изображения в форме редактирования вместе со всеми обработчиками событий, связанными через jquery.fileApi.

Мы не можем придумать, как можно рендерить уже загруженные изображения.

Спасибо,
Фейсал Насир