使用jquery File Api加载图像

We are using jquery.fileApi.js to upload images in a form alongwith Yii Framework. https://rubaxa.github.io/jquery.fileapi/

We have successfully uploaded the images on the server.

Here's the code to upload a file,

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

Server Side Code

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

We are having issues how to load those images again on the form.

We want to show uploaded images on edit form along with all the event handlers bind through jquery.fileApi .

We cant figure out a way which could render already uploaded images.

Thanks, Faisal Nasir