uploadify with prettyPhoto:uncaught exception:调用StartUpload失败

时间:2012-05-25 10:34:14

标签: javascript jquery jquery-plugins uploadify prettyphoto

我们一直使用uploadify进行图片上传,prettyPhoto用于在我们的Rails应用程序中在灯箱上显示图片。如果单独使用,两者都很好。现在,我们希望在灯箱上显示uploadify控件,就像dropbox一样,但如果与prettyPhoto一起使用,它会开始尖叫。

以下是使用uploadify和prettyPhoto的示例html。

<!DOCTYPE html>
<html>
<head>
    <title>My Uploadify Implementation</title>
    <link rel="stylesheet" type="text/css" href="uploadify.css">
    <link rel="stylesheet" type="text/css" href="prettyPhoto.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
    <script src="jquery.prettyPhoto.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function() {
        $('#file_upload').uploadify({
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php'
            // Your options here
        });

        $('#closeme').live('click', function() {
            $.prettyPhoto.close();
            return false;
        });

        $("a[rel^='prettyPhoto']").prettyPhoto();

    });
    </script>
</head>
<body>
<a href="#inline-1" rel="prettyPhoto" >popop</a>
    <div id="inline-1" style="display:none;">
        <p>This is inline content opened in prettyPhoto.</p>
        <input type="file" name="file_upload" id="file_upload" />
    </div>
</body>
</html>

在这里,您将看到弹出窗口的链接,并点击它在灯箱上显示uploadify控件的链接。然后,您从磁盘中选择图像以上载到服务器。选择图像后,我面临两个问题:

1)在FF和Crome上获得Error: uncaught exception: Call to StartUpload failed javascript错误

2)所选图像未在灯箱上的uploadify控件上列出。如果您关闭pupup并再次单击弹出链接,则会显示文件列表。

如果我删除$("a[rel^='prettyPhoto']").prettyPhoto();行,则上传工作正常。

你知道如何修复它吗?

如果有人建议使用其他插件来实现这种Dropbox样式的上传者,我将不胜感激。

谢谢,Amit Patel

1 个答案:

答案 0 :(得分:0)

您需要在灯箱打开后初始化uploadify,而不是在页面加载时。原因是因为如果元素被隐藏,Flash将不会加载。

我查看了prettyPhoto api,找不到灯箱打开后调用的任何事件,但这就是你需要做的事情。