在 php 文件“Uncaught TypeError”中插入 JQuery 函数答案

【问题标题】：insert JQuery function in php file " Uncaught TypeError "在 php 文件“Uncaught TypeError”中插入 JQuery 函数
【发布时间】：2017-05-04 14:30:36
【问题描述】：

我正在处理我的项目，该项目使用我在互联网上找到的 jQuery 函数插入全景图片并将其转换为 360 度照片。我是 JQuery 的初学者，我不知道如何解决以下错误，我在上传图片时尝试在我的 php 文件中包含这个 .js 函数，但是这个 jquery 函数不起作用：

jquery.mousewheel.min.js：

(function(c) {
var a = ["DOMdMouseScroll", "mousewheel"];
c.event.special.mousewheel = {
    setup: function() {
        if (this.addEventListener) {
            for (var d = a.length; d;) {
                this.addEventListener(a[--d], b, false)
            }
        } else {
            this.onmousewheel = b
        }
    },
    teardown: function() {
        if (this.removeEventListener) {
            for (var d = a.length; d;) {
                this.removeEventListener(a[--d], b, false)
            }
        } else {
            this.onmousewheel = null
        }
    }
};
c.fn.extend({
    mousewheel: function(d) {
        return d ? this.bind("mousewheel", d) : this.trigger("mousewheel")
    },
    unmousewheel: function(d) {
        return this.unbind("mousewheel", d)
    }
});

function b(f) {
    var d = [].slice.call(arguments, 1),
        g = 0,
        e = true;
    f = c.event.fix(f || window.event);
    f.type = "mousewheel";
    if (f.wheelDelta) {
        g = f.wheelDelta / 120
    }
    if (f.detail) {
        g = -f.detail / 3
    }
    d.unshift(f, g);
    return c.event.handle.apply(this, d)
}})(jQuery);

jquery.panorama360.js：

(function($) {
$.fn.panorama360 = function(options) {
    this.each(function() {
        var settings = {
            start_position: 0,
            image_width: 0,
            image_height: 0,
            mouse_wheel_multiplier: 20,
            bind_resize: true
        };
        if (options) $.extend(settings, options);
        var viewport = $(this);
        var panoramaContainer = viewport.children('.panorama-container');
        var viewportImage = panoramaContainer.children('img:first');
        if (settings.image_width <= 0 && settings.image_height <= 0) {
            settings.image_width = parseInt(viewportImage.data("width"));
            settings.image_height = parseInt(viewportImage.data("height"));
            if (!(settings.image_width) || !(settings.image_height)) return;
        }
        var image_ratio = settings.image_height / settings.image_width;
        var elem_height = parseInt(viewport.height());
        var elem_width = parseInt(elem_height / image_ratio);
        var image_map = viewportImage.attr('usemap');
        var image_areas;
        var isDragged = false;
        var mouseXprev = 0;
        var scrollDelta = 0;

        viewportImage.removeAttr("usemap").css("left", 0).clone().css("left", elem_width + "px").insertAfter(viewportImage);

        panoramaContainer.css({
            'margin-left': '-' + settings.start_position + 'px',
            'width': (elem_width * 2) + 'px',
            'height': (elem_height) + 'px'
        });

        setInterval(function() {
            if (isDragged) return false;
            scrollDelta = scrollDelta * 0.98;
            if (Math.abs(scrollDelta) <= 2) scrollDelta = 0;
            scrollView(panoramaContainer, elem_width, scrollDelta);
        }, 1);
        viewport.mousedown(function(e) {
            if (isDragged) return false;
            $(this).addClass("grab");
            isDragged = true;
            mouseXprev = e.clientX;
            scrollOffset = 0;
            return false;
        }).mouseup(function() {
            $(this).removeClass("grab");
            isDragged = false;
            scrollDelta = scrollDelta * 0.45;
            return false;
        }).mousemove(function(e) {
            if (!isDragged) return false;
            scrollDelta = parseInt((e.clientX - mouseXprev));
            mouseXprev = e.clientX;
            scrollView(panoramaContainer, elem_width, scrollDelta);
            return false;
        }).bind("mousewheel", function(e, distance) {
            var delta = Math.ceil(Math.sqrt(Math.abs(distance)));
            delta = distance < 0 ? -delta : delta;
            scrollDelta = scrollDelta + delta * 5;
            scrollView(panoramaContainer, elem_width, delta * settings.mouse_wheel_multiplier);
            return false;
        }).bind('contextmenu', stopEvent).bind('touchstart', function(e) {
            if (isDragged) return false;
            isDragged = true;
            mouseXprev = e.originalEvent.touches[0].pageX;
            scrollOffset = 0;
        }).bind('touchmove', function(e) {
            e.preventDefault();
            if (!isDragged) return false;
            var touch_x = e.originalEvent.touches[0].pageX;
            scrollDelta = parseInt((touch_x - mouseXprev));
            mouseXprev = touch_x;
            scrollView(panoramaContainer, elem_width, scrollDelta);
        }).bind('touchend', function(e) {
            isDragged = false;
            scrollDelta = scrollDelta * 0.45;
        });

        if (image_map) {
            $('map[name=' + image_map + ']').children('area').each(function() {
                switch ($(this).attr("shape").toLowerCase()) {
                    case 'rect':
                        var area_coord = $(this).attr("coords").split(",");
                        $area1 = $("<a class='area' href='" + $(this).attr("href") + "' title='" + $(this).attr("alt") + "'</a>");
                        panoramaContainer.append($area1.data("stitch", 1).data("coords", area_coord));
                        panoramaContainer.append($area1.clone().data("stitch", 2).data("coords", area_coord));
                        break;
                }
            });
            $('map[name=' + image_map + ']').remove();
            image_areas = panoramaContainer.children(".area");
            image_areas.mouseup(stopEvent).mousemove(stopEvent).mousedown(stopEvent);
            repositionHotspots(image_areas, settings.image_height, elem_height, elem_width);
        }

        if (settings.bind_resize) {
            $(window).resize(function() {
                elem_height = parseInt(viewport.height());
                elem_width = parseInt(elem_height / image_ratio);
                panoramaContainer.css({
                    'width': (elem_width * 2) + 'px',
                    'height': (elem_height) + 'px'
                });
                viewportImage.css("left", 0).next().css("left", elem_width + "px");
                if (image_map) repositionHotspots(image_areas, settings.image_height, elem_height, elem_width);
            });
        }
    });

    function stopEvent(e) {
        e.preventDefault();
        return false;
    }

    function scrollView(panoramaContainer, elem_width, delta) {
        var newMarginLeft = parseInt(panoramaContainer.css('marginLeft')) + delta;
        if (newMarginLeft > 0) newMarginLeft = -elem_width;
        if (newMarginLeft < -elem_width) newMarginLeft = 0;
        panoramaContainer.css('marginLeft', newMarginLeft + 'px');
    }

    function repositionHotspots(areas, image_height, elem_height, elem_width) {
        var percent = elem_height / image_height;
        areas.each(function() {
            area_coord = $(this).data("coords");
            stitch = $(this).data("stitch");
            switch (stitch) {
                case 1:
                    $(this).css({
                        'left': (area_coord[0] * percent) + "px",
                        'top': (area_coord[1] * percent) + "px",
                        'width': ((area_coord[2] - area_coord[0]) * percent) + "px",
                        'height': ((area_coord[3] - area_coord[1]) * percent) + "px",
                    });
                    break;
                case 2:
                    $(this).css({
                        'left': (elem_width + parseInt(area_coord[0]) * percent) + "px",
                        'top': (area_coord[1] * percent) + "px",
                        'width': ((area_coord[2] - area_coord[0]) * percent) + "px",
                        'height': ((area_coord[3] - area_coord[1]) * percent) + "px",
                    });
                    break;
            }
        });
    }
}})(jQuery);

php 文件：

   <?php
    echo '<link rel="stylesheet" href="/css/panorama360.css">';
    echo "<script
  src='https://code.jquery.com/jquery-3.1.1.min.js'
  integrity='sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='
  crossorigin='anonymous'></script>";
  echo "<script src='/js/jquery.mousewheel.min.js'></script>";
  echo "<script src='/js/jquery.panorama360.js'></script>";
  echo "<script>$(function(){ $('.panorama-view').panorama360(); });</script>"; 
 if(isset($_POST['upload'])) {
 $image_name= $_FILES['image']['name'];
 $image_type= $_FILES['image']['type'];
 $image_size= $_FILES['image']['size'];
 $image_tmp= $_FILES['image']['tmp_name'];

 if(move_uploaded_file($image_tmp,"uploadedimg/$image_name"))
 {
     echo "<script type='text/javascript'>alert('File Uploaded!');</script>";
 }

$folder= "uploadedimg/";


if(is_dir($folder)) {

    if($handle = opendir($folder)){

        while(($file= readdir($handle)) !=false){

            if($file === '.' || $file === '..') 
                continue;
            echo '<div class="panorama round" style=" width:1200px; height:500px; padding:10px ;background-color:#444; position: relative;">';
            echo '<div class="panorama-view">';
            echo '<div class="panorama-container">';
            echo '<img src="uploadedimg/'.$file.'" data-width="4077" data-height="500" alt="Panorama" >';
            echo '</div>';
            echo '</div>';
            echo '</div>';
        }
        closedir($handle);
    }   
}}  ?>

【问题讨论】：

看起来像一些关于文件包含顺序的问题。您能否尝试在“jquery.mousewheel.min.js”之前包含“jquery.panorama360.js”？
@Nitesh 我的帖子是用文件 jquery.panorama360.js 编辑的
您能否详细说明您要在 PHP 代码中实现的目标？我预见它会在 jQuery 而不是 PHP 中更好地处理，但需要您的输入才能清楚。
@nyedidikeke 我希望能够上传 .jpg 图片，用户可以从他的计算机中选择并使用我在之前上传的文件中使用的 jQuery 函数
对不起@menna;刚到这里：在重新安置职位时遇到了挑战。很高兴您已成功调试并修复它，修复了损坏的链接。

标签： php jquery typeerror

【解决方案1】：

我想我的问题出在我的 php 文件中的 jquery.mousewheel.min.js 文件中，我替换了这个：

echo "<script src='/js/jquery.mousewheel.min.js'></script>";

用这个：

echo "<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js'></script>";

而且效果很好

【讨论】：