我正在使用 ajax 从表单上传文件。一切正常，文件正在上传，但是当我在上传后单击上传按钮上传文件时，文件页面会重新加载。文件上传后如何防止页面重新加载？
HTML :
<form enctype="multipart/form-data">
<input type="file" accept=".xlsx" id="file-upload" name="file"/>
<input id="form_submit" value="Upload" type="submit" name="form_submit"/>
</form>
查询：
$('#form_submit').on('click', function() {
var file_data = $('#file-upload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: 'file_upload_parser.php', // point to server-side PHP script
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data){
alert(data);
}
});
});
PHP：
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
echo "Sucess";
}
只需将输入类型“提交”更改为“按钮”。因为输入类型“提交”确实具有提交表单的默认行为。如果您将输入类型更改为 'button' 并且类型 button 没有默认行为。
<input id="form_submit" value="Upload" type="submit" name="form_submit"/>
至
<button id="form_submit" value="Upload" type="button" name="form_submit">Upload</button>
如果您想使用 jquery 执行此操作，那么只需在 jquery 函数中进行一些更改，您就可以防止提交按钮的默认行为，如下所示。
$('#form_submit').on('click', function(e) {
e.preventDefault();
var file_data = $('#file-upload').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: 'file_upload_parser.php', // point to server-side PHP script
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data){
alert(data);
}
});
});
你可以自由使用
<input id="form_submit" value="Upload" type="submit" name="form_submit"/>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句