未定义JavaScript函数$_Javascript_Jquery_Html

未定义JavaScript函数$

javascript jquery html

未定义JavaScript函数$,javascript,jquery,html,Javascript,Jquery,Html,您好，我是JavaScript的初学者，下面有一段代码，允许我上传一个文件并发送到服务器以获得响应，这一部分工作正常，但问题是，在我返回数据后，我不想被重定向到API链接，我想让它保持在当前页面并在警报中获取数据。我不确定我的函数是否有任何错误，但它一直在控制台引用中给我这个错误。错误：$未定义。任何帮助都将不胜感激，谢谢 <!DOCTYPE html> <html> <meta charset="UTF-8"> <body> <form

您好，我是JavaScript的初学者，下面有一段代码，允许我上传一个文件并发送到服务器以获得响应，这一部分工作正常，但问题是，在我返回数据后，我不想被重定向到API链接，我想让它保持在当前页面并在警报中获取数据。我不确定我的函数是否有任何错误，但它一直在控制台引用中给我这个错误。错误：$未定义。任何帮助都将不胜感激，谢谢

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>

<form action=" API link " class="upload" id="file-upload" method="post" 
  enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload file" name="submit">
</form>

<script>    

$(function() 
{
$('#file-upload').upload({
    maxFiles: 1,
    acceptedFiles: ".pdf,.doc,.docx,.html", 
    dataType: "json",
    success : function(data) {
        alert(data.xhr.response);
    }
});
});

</script>   
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
</body>
</html>

定义函数后，您将引用jQuery

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head></head>
<body>

<form action=" API link " class="upload" id="file-upload" method="post" 
  enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload file" name="submit">
</form>

不，不是D在@rncrtr-> $function { $‘文件上传’。上传{ maxFiles:1，接受的文件：.pdf、.doc、.docx、.html、，数据类型：json，成功：functiondata{ alertdata.xhr.response； } }; };

请记住，浏览器始终按从左到右，然后从上到下的顺序呈现内容。这意味着，当它尝试执行您编写的jquerysnip时，它应该知道jQuery的$。否则，它会说$是未定义的。这实际上意味着对jQuery库文件的引用应该出现在文档的顶部，即其中包含jQuery片段

编辑：将jQuery引用移动到@rncrtr建议之后的底部。

这是因为您正在代码段之后加载jQuery库。请在任何其他代码之前加载它

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script>    
 $(function() 
{
$('#file-upload').upload({
    maxFiles: 1,
    acceptedFiles: ".pdf,.doc,.docx,.html", 
    dataType: "json",
    success : function(data) {
        alert(data.xhr.response);
    }
});
});

</script>

在head中加载jQuery，并在body标记的末尾添加脚本标记

<head>
    <script src="jquery-3.3.1.min.js"></script>
</head>

作为参考

我想澄清一下，在尝试使用jQuery之前，首先需要包含jQuery。函数代码需要在jQuery脚本之后。那就没问题了。为了提高性能，jQuery应该加载到页脚中，但是代码应该在它之后加载。您可以将jQuery放在标题中，但速度会慢一些。@RomeoSierra虽然有所帮助，但出现了这个新错误$..上传不是一个好消息function@NigelChuan上载函数在哪里据我所知，jQuery中没有名为upload的函数。@rncrtr更新了答案：谢谢你的提醒。。。

Add onclick event in button:
  <input type="submit" value="Upload file" name="submit" onclick="uplaod(); return false">

Add this in Script File: 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script>    
 function uplaod() 
{
$('#file-upload').upload({
    maxFiles: 1,
    acceptedFiles: ".pdf,.doc,.docx,.html", 
    dataType: "json",
    success : function(data) {
        alert(data.xhr.response);
    }
});
}

</script>