我需要防止頁面重定向到上傳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