【问题标题】:AJAX style uploaderAJAX 风格的上传器
【发布时间】:2009-11-05 08:54:14
【问题描述】:

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

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

它是一个 ajax 风格的上传器。

我的问题是:

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

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

萤火虫返回: 代码:

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,请告诉我。

非常感谢任何帮助。

【问题讨论】:

  • 经过进一步测试,似乎只要删除了 iframe,该功能就不再起作用...

标签: jquery ajax upload


【解决方案1】:

您似乎没有在任何地方定义“自我” - 这是完整的代码吗?

【讨论】:

  • 完整的java脚本是的。它似乎不会影响任何其他部分(在该功能下方)......有什么想法如何定义它? .. 不是 window.name = "main";定义它?
  • act.uploader.iframe.js - 在 iframe 中加载 act.uploader.js - 在主页中加载
  • 哦,忽略我 - 不知道 window.self
  • 原谅 ;-) 不是很好的 jquery 和 ajax...尝试学习,因为我需要它,哈哈
猜你喜欢
  • 2011-11-28
  • 1970-01-01
  • 1970-01-01
  • 2011-09-01
  • 1970-01-01
  • 2020-04-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多