Question

嗨，我是JavaScript的初学者我在下面有这个代码，允许我上传一个文件并将其发送到服务器以获得回复，该部分工作正常，但问题是我在我回来之后数据我不想被重定向到我想要的API链接，以便我留在当前页面并获取警报中的数据我不确定我的功能是否有任何问题，但它一直给我控制台ReferenceError: $ is not defined中出现此错误。非常感谢任何帮助，谢谢！

<!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>

Answer 1

在定义函数之后，您指的是jQuery。

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
    <!--It's always better to have external references at the top, within the <head> -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
</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>

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

请记住，浏览器始终按照从左到右，然后从上到下的顺序呈现内容。这意味着，当它尝试执行您编写的jQuery剪辑时，它应该知道jQuery的{{1}}。否则，它会说$。这实际上意味着对jQuery库文件的引用应该出现在文档的顶部，您正在使用jQuery剪辑。

Answer 2

这是因为您在代码片段之后加载了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>

Answer 3

在头部加载jQuery并在body标签的末尾添加脚本标记

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

供参考https://www.w3schools.com/jquery/jquery_get_started.asp

Answer 4

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>

JavaScript函数$未定义

4 个答案: