Php 使用jquery文件Api加载图像

我们使用jquery.fileApi.js以Yii框架的形式上传图像

我们已成功地将图像上载到服务器上

这是上传文件的代码

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

我们遇到了如何将这些图像再次加载到表单上的问题

我们希望在编辑表单上显示上传的图像，以及通过jquery.fileApi绑定的所有事件处理程序

我们无法找到一种方法来渲染已经上传的图像

谢谢，

---

费萨尔·纳西尔

您是否将数据保存在数据库中？您想如何显示您的图像？不。。。我们在数据库中保存了物理文件。如何在数据库中保存物理文件？你是说在托管服务器中吗？我们不在数据库中保存文件。我们将文件保存在托管服务器的磁盘上。我已经附上了我们希望如何显示的图像。请包括服务器端的.php代码，以便我们可以看到您的图像是如何存储在服务器上的。

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