我的代码有问题，我需要使用 ajax 发送图像，但是当我在我的代码中时，它不起作用。
我需要使用表单来验证我的 servlet。
<script type="text/javascript">
function UploadFile() {
fileData = document.getElementById("filePicker").files[0];
var data = new FormData();
var url = 'localhost';
console.log(url);
alert(url);
$.ajax({
url: url,
type: 'POST',
data: fileData,
cache: false,
crossDomain: true,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
alert('successful..');
},
error: function (data) {
alert('Ocorreu um erro!');
}
});
alert("Finalizou");
}
</script>
<body>
<form>
<input type="file" id="filePicker" value="" />
<button id="btnUpload" onclick="UploadFile()">Upload</button>
</form>
</body>
如果我像那样删除表单。
<body>
<input type="file" id="filePicker" value="" />
<button id="btnUpload" onclick="UploadFile()">Upload</button>
</body>
这是有效的。
最佳答案
默认情况下，按钮元素的类型为submit，因此它将提交表单并重新加载页面。
你必须防止这样的事情发生
<form>
<input type="file" id="filePicker" value="" />
<button id="btnUpload" onclick="UploadFile(); return false;">Upload</button>
</form>
但是当你使用 jQuery 时，你应该删除内联 javascript 并使用适当的事件处理程序
$(function() {
$('#btnUpload').closest('form').on('submit', function(e) {
e.preventDefault();
UploadFile();
});
});
关于javascript - ajax 表单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25209420/