AJAX风格上传者

时间:2009-11-05 08:54:14

标签: jquery ajax upload

早上好。我的脚本在这里运行:

http://www.actwebdesigns.co.uk/web-design-mansfield/php-functions/AJAX-style-image-uploader-script-php-jquery.php

这是一个ajax风格的上传者。

我的问题是:

上传图片时,会要求刷新已上传的图片列表。

但是一旦刷新一次,“获取高度和宽度”功能就不再有效了。

Firebug返回: 代码:

self.parent is null

代码:

var image =  self.parent.$("#imageSelect :selected").text();

这是我的代码:

act.uploader.iframe.js

代码:

// JavaScript Document
$(document).ready(function () {
    var pageContents = $("body").html();
    function getHeightAndWidth() {
         self.parent.$("#getHeightWidth").bind("click", function () {
            var dir = "getHeightAndWidth.php"; //directory to script
            var image =  self.parent.$("#imageSelect :selected").text();
             self.parent.$("input[class=userInput2], select, #getHeightWidth").attr('disabled', true);
             self.parent.$("#getError").html('<p>Gathering data please wait... <img src="loader.gif" /></p>');
            $.ajax({
                type: "POST",
                url: dir, 
                data: 'image=' + image, 
                cache: false,
                timeout:30000,
                error: function () {
                     self.parent.$("#getError").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
                     self.parent.$("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
                },
                success: function (html) {
                     self.parent.$("#heightAndWidthWrapper").html(html);
                     self.parent.$("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
                }
            });
        });
        self.parent.$("#uploaderIframe").remove();
    }
    function buttonConvert() { // this function can be used on any page you want to make more accessible. Turns all type="submit" into type="button"
        self.parent.$("input[type=submit]").each(function () {
            var buttonClassFind = $(this).attr("class");
            if (buttonClassFind!="leave")
            {
                var inputButton = $(this);
                var newInputButton = $('<input type="button" id="' + inputButton.attr('id') + '" name="' + inputButton.attr('name') + '" class="' + inputButton.attr('class') + '" value="' + inputButton.val() + '" rel="' + inputButton.attr('rel') + '"/>').insertBefore(inputButton);
                inputButton.remove();
            }            
        });
    }
    function refreshImages() {
        self.parent.$("#sizeOptionsWrapper").html('<p>refreshing... <img src="loader.gif" /></p>');
        $.ajax({
            url: 'function.loadImages.php',  
            cache: false,
            timeout:30000,
            error: function () {
                self.parent.$("#sizeOptionsWrapper").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
                self.parent.$("#uploaderIframe").remove();
            },
            success: function (html) {
                self.parent.$("#sizeOptionsWrapper").html(html);
                buttonConvert();
                getHeightAndWidth();
            }
        }); 
    }
    self.parent.$("#uploadResult").html(pageContents);
    refreshImages();
});

act.uploader.js

代码:

// JavaScript Document
$(document).ready(function () {
    window.name = "main";
    function upload() {
        $("#uploadSubmit").bind("click", function () {
            var results = '<iframe name="uploader" id="uploaderIframe"></iframe>';
            $("#uploader").append(results);
            $("#uploadResult").html('<p>Uploading please wait... <img src="loader.gif" /></p>');
        });
    }
    function getHeightAndWidth() {
        $("#getHeightWidth").bind("click", function () {
            var dir = "getHeightAndWidth.php"; //directory to script
            var image = $("#imageSelect :selected").text();
            $("input[class=userInput2], select, #getHeightWidth").attr('disabled', true);
            $("#getError").html('<p>Gathering data please wait... <img src="loader.gif" /></p>');
            $.ajax({
                type: "POST",
                url: dir, 
                data: 'image=' + image, 
                cache: false,
                timeout:30000,
                error: function () {
                    $("#getError").html("<p>We are currently have a large volume of users and are slowing down our system. Please try again later.</p>");
                    $("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
                },
                success: function (html) {
                    $("#heightAndWidthWrapper").html(html);
                    $("input[class=userInput2], select, #getHeightWidth").removeAttr('disabled');
                }
            });
        });
    }
    function buttonConvert() { // this function can be used on any page you want to make more accessible. Turns all type="submit" into type="button"
        $("input[type=submit]").each(function () {
            var buttonClassFind = $(this).attr("class");
            if (buttonClassFind!="leave")
            {
                var inputButton = $(this);
                var newInputButton = $('<input type="button" id="' + inputButton.attr('id') + '" name="' + inputButton.attr('name') + '" class="' + inputButton.attr('class') + '" value="' + inputButton.val() + '" rel="' + inputButton.attr('rel') + '"/>').insertBefore(inputButton);
                inputButton.remove();
            }            
        });
    }
    buttonConvert();
    upload();
    getHeightAndWidth();
});

如果需要php或html让我知道。

任何帮助非常感谢。

1 个答案:

答案 0 :(得分:0)

你似乎没有在任何地方定义'self' - 是完整的代码吗?