Jquery & Ajax -> 無法上傳文件
[英]Jquery & Ajax -> File upload not possible
問題描述
我完全迷路了。
我嘗試在 PHP 中制作一些圖像上傳功能，一切正常。 因為我不希望整個頁面重新加載，所以在上傳文件時我想將 AJAX 與 Jquery 一起使用，通過 POST 將表單內容（圖像）發送到帶有隱藏 ajax 請求的 upload.php 之類的文件。
無論我嘗試什么都不可能用 formData() 發送任何東西。 我復制並粘貼了幾個示例代碼，嘗試更改代碼，當我使用 formData() 時沒有任何反應。
Jquery/Ajax 的正常請求，使用 POST 工作正常。
這是我上次使用的代碼示例..
是不是我的 XamPP 配置錯誤，或者是什么原因導致 google、教程頁面等中的腳本中的一個不起作用？
<!DOCTYPE html> <html> <body> <script type="text/javascript" src="jquery.min.js"></script> <form id="Test" action="" method="post" enctype="multipart/form-data"> Select image to upload: <input type="file" name="fileToUpload" id="fileToUpload"> </form> <button id="Knopf">Knopf</button> <div id="Disp">fghfgh</div> </body> <script> $(document).ready(function(){ $("#Knopf").click(function(){ var formData = new FormData(Test); $.ajax({ url : "uploadtest2.php", type : "POST", data : formData, cache : false, contentType : false, processType : false, success : function() { $("#Disp").html(result); } }); }); }); </script> </html>
<?php $target_dir = "Media/uploads/"; $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); $uploadOk = 1; $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION)); // Check if image file is a actual image or fake image if(isset($_POST["submit"])) { $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); if($check !== false) { echo "File is an image - " . $check["mime"] . "."; $uploadOk = 1; } else { echo "File is not an image."; $uploadOk = 0; } } // Check if file already exists if (file_exists($target_file)) { echo "Sorry, file already exists."; $uploadOk = 0; } // Check file size if ($_FILES["fileToUpload"]["size"] > 500000) { echo "Sorry, your file is too large."; $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded."; } else { echo "Sorry, there was an error uploading your file."; } } ?>
2 個解決方案
解決方案1
0 2020-09-30 21:26:06
問題是這樣的：
if(isset($_POST["submit"])) {
表單中沒有名為submit的元素，因此此檢查失敗。 即使表單中有提交按鈕，它也不會包含在formData ，因為按鈕僅在觸發正常表單提交時才會自動包含在 POST 數據中。
您可以將其添加到formData 。
var formData = new FormData(Test);
formData.set("submit", "1");
或者你可以改變你的測試
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
解決方案2
-1 2020-09-30 21:13:21
請參閱： https : //developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
您必須使用表單元素：
一個 HTML
<form>元素——當指定時，FormData對象將使用表單的當前鍵/值填充，使用每個元素的名稱屬性作為鍵及其提交的值。 它還將對文件輸入內容進行編碼。
考慮以下示例。
$(function() { $("#Test").submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ url: "uploadtest2.php", type: "POST", data: formData, cache: false, contentType: false, processType: false, success: function(result) { $("#Disp").html(result); } }); }); $("#Knopf").click(function() { $("#Test").submit(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="Test" action="" method="post" enctype="multipart/form-data"> Select image to upload: <input type="file" name="fileToUpload" id="fileToUpload" /> </form> <button id="Knopf" type="submit">Knopf</button> <div id="Disp">fghfgh</div>
最好綁定到submit回調。 這樣，如果用戶提交表單或點擊提交，就會觸發回調。 我們需要在事件上使用.preventDefault()以確保表單不會發布或提交數據。 現在我們可以在不刷新頁面的情況下執行 AJAX 調用。
在您的success回調中，您必須傳入一個用於返回數據的變量。 否則result將是未定義的。
使用正確的 FormData，上傳應該沒有問題。 回調中的this指的是表單元素本身。
考慮更新您的 PHP：
if(isset($_POST["submit"])) {
將此更改為：
if(isset($_POST["fileToUpload"])) {
jQuery / ajax文件上傳
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.