Question

我正在使用我在网上找到的一些代码，它会给我一个花哨的文件上传按钮，也允许用户将文件拖放到放置区域。它在jsfiddle中运行得很好但是当我通过Cpanel将代码添加到我的Wordpress文件时，它无法正常工作。我什么也没做，只是复制并粘贴文件。

错误：

未捕获的TypeError：undefined不是函数指出：$(window).load(function(){

未捕获的TypeError：$ container.imagesLoaded不是函数指向5件事：

$container.imagesLoaded(function(){
m.Callbacks.j @ jquery.js？ver = 1.11.3：2
m.Callbacks.k.fireWith @ jquery.js？ver = 1.11.3：2
m.extend.ready @ jquery.js？ver = 1.11.3：2
J @ jquery.js？ver = 1.11.3：2

的functions.php

<?php

function my_scripts() {
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '3.3.5', true );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js');
}
add_action('wp_enqueue_scripts', 'my_scripts');

function my_styles() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_styles');

?>

自定义-js.js

$(window).load(function(){
    $('#drop').click(function(){
        console.log('click');
        $('#fileBox').trigger('click');
    });
    //Remove item
    $('.fileCont span').click(function(){
        $(this).remove();
    });
});
if (window.FileReader) {
    var drop;
    addEventHandler(window, 'load', function () {
        var status = document.getElementById('status');
        drop = document.getElementById('drop');
        var list = document.getElementById('list');

        function cancel(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }

        // Tells the browser that we *can* drop on this target
        addEventHandler(drop, 'dragover', cancel);
        addEventHandler(drop, 'dragenter', cancel);

        addEventHandler(drop, 'drop', function (e) {
            e = e || window.event; // get window.event if e argument missing (in IE)   
            if (e.preventDefault) {
                e.preventDefault();
            } // stops the browser from redirecting off to the image.

            var dt = e.dataTransfer;
            var files = dt.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();

                //attach event handlers here...

                reader.readAsDataURL(file);
                addEventHandler(reader, 'loadend', function (e, file) {
                    var bin = this.result;
                    var fileCont = document.createElement('div');
                    fileCont.className = "fileCont";
                    list.appendChild(fileCont);

                    var fileNumber = list.getElementsByTagName('img').length + 1;
                    status.innerHTML = fileNumber < files.length ? 'Loaded 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';

                    var img = document.createElement("img");
                    img.file = file;
                    img.src = bin;
                    img.className = "thumb";
                    fileCont.appendChild(img);

                    var newFile = document.createElement('div');
                    newFile.innerHTML = file.name;
                    newFile.className = "fileName";
                    fileCont.appendChild(newFile);

                    var fileSize = document.createElement('div');
                    fileSize.className = "fileSize";
                    fileSize.innerHTML = Math.round(file.size/1024) + ' KB';
                    fileCont.appendChild(fileSize);

                    var progress = document.createElement('div');
                    progress.className = "progress";
                    progress.innerHTML = '<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar progress-bar-success" role="progressbar" style="width: 100%"></div>';
                    fileCont.appendChild(progress);

                    var remove = document.createElement('div');
                    remove.className = "remove";
                    remove.innerHTML = '<span class="glyphicon glyphicon-remove"></div>';
                    list.appendChild(remove);


                }.bindToEventHandler(file));
            }
            return false;
        });
        Function.prototype.bindToEventHandler = function bindToEventHandler() {
            var handler = this;
            var boundParameters = Array.prototype.slice.call(arguments);
            //create closure
            return function (e) {
                e = e || window.event; // get window.event if e argument missing (in IE)   
                boundParameters.unshift(e);
                handler.apply(this, boundParameters);
            }
        };
    });
} else {
    document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
}


function addEventHandler(obj, evt, handler) {
    if (obj.addEventListener) {
        // W3C method
        obj.addEventListener(evt, handler, false);
    } else if (obj.attachEvent) {
        // IE method.
        obj.attachEvent('on' + evt, handler);
    } else {
        // Old school method.
        obj['on' + evt] = handler;
    }
}


//Not plugged yet
var bar = $('.progress-bar');
$(function(){
  $(bar).each(function(){
    bar_width = $(this).attr('aria-valuenow');
    $(this).width(bar_width + '%');
  });
});

儿童主题＆style.css

body{
    color:#666;
}
#drop {
    border: 1px dashed #ccc;
    width: 450px;
    min-height: 35px;
    margin: 10px auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display:box;
    cursor:pointer;
}
#status {
    width:450px;
    margin: 0 auto;
}
#list {
    width:450px;
    margin: 0 auto;
}
.msg-drop{
    padding:10px;
}
.thumb {
    width:33px;
    height:33px;
    float:left;
    margin:3.5px;
    border: 1px solid #ccc;
}
.fileCont{
    display:block;
    width:425px;
    height:40px;
    margin:2.5px;
    float:left;
}
.fileSize{
   text-align:right;
    margin:2.5px;
    font-size:12px;
    padding-right: 10px;
}
.fileName{
    float:left;
    padding:2.5px;
    font-weight:700;
    text-transform: capitalize;    
}
.remove{
    width:20px;
    height:40px;
    padding-top: 13px;
    font-size: 18px;
    float:left;
}
.progress {
  height: 6px!important;
  width: 380px;
  margin-top: 5px;
}
.progress-bar {
  -webkit-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out;
}
#fileBox{
    display:none;
}

Answer 1

你是否包括jquery库？如果您还没有，请加入

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11); function my_jquery_enqueue() { wp_deregister_script('jquery'); wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . ":https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js", false, null); wp_enqueue_script('jquery'); }

在functions.php文件中

如果您已经这样做，请检查var container是否设置在任何地方。我在示例

中没有看到该变量的定义

Answer 2

我明白了！问题是jsfiddle中的示例使用的是jquery版本2.1.0，所以我只是将jquery的版本排入队列并且它有效！

<强>的functions.php

<?php

function my_scripts() {
wp_register_script('jquery1', '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js', false, null);
wp_enqueue_script('jquery1');
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '3.3.5', true );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js');
}
add_action('wp_enqueue_scripts', 'my_scripts');

function my_styles() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_styles');

?>

在制作花哨的文件输入时未捕获TypeError

2 个答案: