Question

我的代码已经在工作了，感谢Brian，但是当我把它放在外部文件上时它仍无法正常工作。谁能帮我理解为什么？

js代码（其他功能没问题，因为代码太长了没把它放在这里）：

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.target.files;

    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
        f.size, ' bytes, last modified: ',
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a','</li>');
    }

    $("#list").html('<ul>' + output.join('') + '</ul>');    
 }


$(document).ready(function() {

    //showAllImages();
    //showAllImagesFromCategory("beach");
    styleWordCloud();


    //associar pesquisa de categoria a cada palavra da nuvem de palavras
    $( "nav ul li a" ).each(function( index ) {


        $(this).click( function(event) {
            event.preventDefault();
            clearResults();

            showAllImagesFromCategory( $(this).text() );

        });

    });


    $("#search_form").submit(function(event){
        event.preventDefault();

        var q = $("#query").val()

        clearResults();
        showAllImagesFromQuery( q );

     });

    $( "div.color" ).each(function( index ) {

        $(this).click( function(event) {
            event.preventDefault();

            var selectedColor = $(this).css("background-color");
            //alert( selectedColor );
            clearResults();
            showAllImagesNearDominantColor( selectedColor );

        });

    });

    $( "#files" ).change(handleFileSelect(event));

});

html代码：

<head>
<title>Pesquisa de Imagens</title>
<meta charset="utf-8">  
<!-- Inclusao de biblioteca JQuery -->
<script src="js/jquery-2.1.1.min.js" language="javascript"></script>
<script src="js/XML_LStorage.js"></script>
<script src="js/jsCode.js" language="javascript"></script>

<link rel="stylesheet" type="text/css" href="my_style.css">


</head>

<body>

<!--zona do cabeçalho da página. Inclui logotipo e barra de navegacao-->
<header>        
    <h1 id="site_title"><a href="index.html">Pesquisa de Imagens</a></h1>


    <!-- Main Menu -->
    <h2>Main menu</h2>
    <nav class="main-navigation">
        <ol>
            <li><a class="menu" href="index.html">Home</a></li>
            <li><a class="menu" href="search_bar.html">Barra Pesquisa</a></li>
            <li><a class="menu" href="color_search.html">Pesquisa por cor dominante</a></li>
            <li class="current"><a class="menu" href="image_search.html">Pesquisa por imagens</a></li>
            <li><a class="menu" href="contact_us.html">Contacte-nos</a></li>
        </ol>
</nav>



</header>

<!-- zona de conteúdo da página. Inclui logotipo e barra de navegacao -->
<article>
    <nav class="cloud">
        <ul>
            <li><a href="#">beach</a></li>
            <li><a href="#">birthday</a></li>
            <li><a href="#">face</a></li>
            <li><a href="#">indoor</a></li>
            <li><a href="#">manmade</a></li> <!-- alterar para todos de uma maneira bacana -->
            <li><a href="#">marriage</a></li>
            <li><a href="#">nature</a></li>
            <li><a href="#">no people</a></li>
            <li><a href="#">outdoor</a></li>
            <li><a href="#">party</a></li>
            <li><a href="#">people</a></li>
            <li><a href="#">snow</a></li>
        </ul>
     </nav>

    <!-- Primeira secção -->
    <section class="search_bar">

        <h2>Pesquisa por imagens</h2>
        <p>Pesquisa por pastas</p>
        <form id="img_search">
            <input type="file" id="files" name="files[]" multiple/>
            <output id="list"></output>
        </form>
        <p>Ou arrasta a imagem para o quadrado a tracejado</p>
        <center>
        <div id="drop_zone">Drop files here</div>
        <output id="list_dropzone"></output></center>

    </section>          

</article>


</body>
</html>

Answer 1

更改行 -

$( "#files" ).change(handleFileSelect(event));

要 -

$("#files").on("change", handleFileSelect); // See http://api.jquery.com/on/

或者 -

$("#files").change(handleFileSelect); // See http://api.jquery.com/change/

通过编写“handleFileSelect（event）”，您将立即执行该函数，而不是响应事件（括号将名为“event”的未定义参数传递给函数并立即执行）。 jQuery会自动将事件对象作为第一个参数传递给您定义的事件处理程序。

由于evt未定义，因此函数中的文件未定义 - 这会导致错误。

作为参考，如果你想将参数传递给事件，你可以这样做 -

$("#files").on("change",  function (event) { handleFileSelect(event, someParameter); });

将外部文件中的Javascript代码链接到HTML

1 个答案: