uploadify - 在页面上显示上传的图像

时间:2012-12-18 14:09:09

标签: php javascript ajax uploadify

我正在构建一个使用uploadify的网站(在php中),允许用户上传投资组合图片。

我上传工作正常,但我只是想知道在上传图片后在网页上显示上传图片的最佳方式。是否可以不刷新页面?

我在下面粘贴了uploadify代码:

<script>
    <?php $timestamp = time();?>
        var counter = 1;
        $(function() {
            $('#file_upload').uploadifive({ 
            onUploadComplete: function(event, queueID, fileObj, reponse, data) {
                //alert(counter);
                counter = counter +1 ;
                     },
                'buttonText'   : 'Upload Images...',
                'uploadLimit'  : 12,
                'uploadScript' : '/includes/uploadifive.php',
                'checkScript'  : '/includes/check-exists.php',
                'auto'         : true,
                'method'       : 'post',
                formData     : { 
                    'page_id' : '<? echo $pageDetails->row['page_id'] ?>',
                    'counter'    : counter,
                    'timestamp'  : '<? echo $timestamp;?>',
                    'token'      : '<? echo md5('unique_salt' . $timestamp);?>'
                 },


            });
        });
        </script>

我不太确定如何从uploadify获取文件名

2 个答案:

答案 0 :(得分:0)

当然,您可以通过DOM动态地向页面添加img元素:

var img = document.createElement('img');
img.src = "/path/to/the/new/img.png";
document.getElementById("somecontainer").appendChild(img);

Live Example | Source

您可能需要对服务器执行ajax调用以获取新映像的路径,除非它自然地从您的应用程序逻辑中消失。

答案 1 :(得分:0)

在我使用的版本中有一个功能

onUploadSuccess : function(file,data,response){
}

然后我可以通过file.name获取文件名; 所以在您的代码中可能是fileObj,您可以尝试使用fileObj.name来获取您上传的文件的名称。