我需要防止页面重定向到上传php时点击上传按钮。HTML防止重定向上传php
如何在下面的代码中执行此操作。
<form id="myForm" action="http://example/DB_1/AccessWeb/file_upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload1">
</form>
<button onclick="myFunction()"> Upload
</button>
<script>
function myFunction(){
document.getElementById("myForm").submit();
}
</script>
一个非常基本的，如何将文件发送飞快地写着例子 - 用ajax到同一页即T他的用户不会被重定向。这是简单的香草JavaScript而不是jQuery。
callback函数可以做的不仅仅是打印响应 - 例如，它可以用于根据上传的成功/失败情况用新内容更新DOM。
<?php
$field='fileToUpload';
if($_SERVER['REQUEST_METHOD']=='POST' && !empty($_FILES)){
$obj=(object)$_FILES[ $field ];
$name=$obj->name;
$tmp=$obj->tmp_name;
$size=$obj->size;
$error=$obj->error;
$type=$obj->type;
if($error==UPLOAD_ERR_OK){
/*
This is where you would process the uploaded file
with various tests to ensure the file is OK before
saving to disk.
What you send back to the user is up to you - it could
be json,text,html etc etc but here the ajax callback
function simply receives the name of the file chosen.
*/
echo $name;
} else {
echo "bad foo!";
}
exit();
}
?>
<!doctype html>
<html>
<head>
<title>File Upload - using ajax</title>
<script>
document.addEventListener('DOMContentLoaded',function(e){
var bttn=document.getElementById('bttn');
bttn.onclick=function(e){
/* Assign a new FormData object using the buttons parent (the form) as the argument */
var data=new FormData(e.target.parentNode);
var xhr=new XMLHttpRequest();
xhr.onload=function(e){
document.getElementById('status').innerHTML=this.response;
}
xhr.onerror=function(e){
alert(e);
}
xhr.open('POST',location.href,true);
xhr.send(data);
};
},false);
</script>
</head>
<body>
<form method='post' enctype='multipart/form-data'>
Select image to upload:
<input type='file' name='fileToUpload'>
<input type='button' id='bttn' value='Upload' />
</form><div id='status'></div>
</body>
</html>
使用JQuery AJAX methods将让您的信息发送和接收到指定的URL，而无需刷新页面。
您需要将JQuery库包含在HTML页面中。您可以下载它，并把它放在你的项目文件夹或这里包括在线图书馆，像这样：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
所以你的形式会是这个样子的：
<form id="myForm" method="post" >
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload1">
<input type="submit">
</form>
然后你就可以使用这个代码简单地上传图片到你的文件上传页面（测试和工作为自己）：
<script>
$(document).ready(function()
{
$("#myForm").submit(function (e)
{
//Stops submit button from refreshing page.
e.preventDefault();
var form_data = new FormData(this);
$.ajax({
url: 'http://example/DB_1/AccessWeb/file_upload.php', //location of where you want to send image
dataType: 'json', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (response)
{
alert('success');
},
error: function()
{
alert('failure');
}
});
});
});
</script>
使用AJAX随着jQuery
$("#myForm").submit(function()
{
var formData = new FormData(this);
$.post($(this).attr("action"), formData, function(response) {
//Handle the response here
});
return false;
});
你能澄清这个问题好吗？您不希望表单在处理上载后发布到'file_upload.php'或重定向？ – RamRaider
是的，我需要上传文件，当点击上传按钮，但不想重定向file_upload.php，而是留在同一页面。 – CodeDezk
两个选项，我看到它：具有POST形式到同一页面（意味着在同一页面上处理上传的php代码）或'file_upload.php'使用'header（'Location：page.php' ）;'where page.php'是表单的网页名称。第三个选项 - 使用ajax – RamRaider