내 코드는 이미 Brian 덕분에 작동하지만 외부 파일에 저장해도 작동하지 않습니다. 아무도 왜 그 이유를 이해하도록 도와 줄 수 있습니까?외부 파일의 자바 스크립트 코드를 HTML에 연결
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>
브라우저 개발자 도구를 사용 할 수 있습니다. JS 콘솔에 오류가 표시됩니까? Net 탭은 JS 파일이'200 OK' 상태와 올바른 content-type으로 성공적으로로드 된 것을 보여 줍니까? – Quentin
귀하의 HTML은 HTML 3.2와 HTML 5의 이상한 결합체입니다 [validator] (http://validator.w3.org)를 사용하십시오. – Quentin
도 doctype이 누락되었습니다. – MightyPork