(注意：更新了标题以更好地匹配问题(
我正在努力为ajax聊天添加图像上传功能，并且我已经编写了HTML和PHP(基本上是从W3Schools复制的(来执行此操作。我在服务器上设置了一个测试 HTML 页面来测试图像上传并且工作正常 - 当按下"上传图像"按钮(执行 PHP 上传代码(时，表单可以工作并且文件上传。但是，上传完成后，页面将切换到空白页面，其中包含我上传.php文件的 URL。
我目前正在使用 HTML 中的模式来最初隐藏图像上传表单，并且仅在按下聊天中的"图像"按钮时才会出现。代码非常简单，正如我所说，与上面的链接基本相同，但放置在模态中。
在任何人抱怨之前，我知道PHP很容易被利用，放在网站上可能会很危险，但这在我的情况下已被确定为不是问题。
以下是图像上传模式的代码。请原谅所有的内联CSS，我最终会把它移到它自己的样式表中，但一直在使用内联进行开发。请注意，显示设置为阻止以进行调试。对于实时站点，它将设置为无，并且当在聊天模块中按下"图像"按钮时，使用javascript函数将其设置为阻止。
<html>
<body>
<div id="imageUploadModal" style="display:block; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%;.
overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4);">
<div style="background-color:#fefefe; margin:15% auto; padding:20px; border:1px solid #888; width:80%;">
<span style="color:#aaa; float:right; font-size:28px; font-weight:bold;">×</span>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image:
<input type="file" name="fileToUpload" id="fileToUpload"/>
<input type="submit" value="Upload Image" name="submit"/>
</form>
</div>
</div>
</body>
</html>
更新：以下是上传内容.php：
<?php
// Error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is an actual image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
//The file is an image
$uploadOk = 1;
} else {
//The file is not an image
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
//The file already exists
$uploadOk = 0;
}
// Check file size
if (2000000 < $_FILES["fileToUpload"]["size"]) {
//The file is too large
$uploadOk = 0;
}
// Allow certain file formats
if (($imageFileType != "jpg") && ($imageFileType != "png")
&& ($imageFileType != "jpeg") && ($imageFileType != "gif")) {
//Only JPG, JPEG, PNG, and GIF files are allowed
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
//The file was not uploaded
exit();
// if everything is ok, try to upload the file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
exit();
} else {
//There was an error uploading the file
exit();
}
}
?>
编辑：更新了HTML/Javascript
// Ajax image upload
$(document).ready(function() {
$("#uploadForm").submit(function(event) {
event.preventDefault();
var $form = $("#uploadForm");
var serializedData = $form.serialize();
var request = $.ajax({
type: "POST",
url: "/upload.php",
data: serializedData
});
request.done(function() {
console.log("AJAX Success!");
closeImageUploadModal();
});
})
});
.HTML：
<div id="imageUploadModal" style="display:none; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%;
overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4);">
<div style="background-color:#0e0e0e; color:#aaa; margin:15% auto; padding:20px; border:1px solid #888; width:50%;">
<span id="close" style="color:#aaa; float:right; font-size:28px; font-weight:bold;" onclick="closeImageUploadModal()">×</span>
<form id="uploadForm">
<h3><b>Select image:</b></h3>
<input type="file" name="fileToUpload" id="fileToUpload" accept=".jpg, .JPG, .png, .PNG, .jpeg, .JPEG, .gif, .GIF"/>
<input type="submit" value="Upload Image" name="submit"/>
</form>
</div>
</div>
如何在不刷新或重定向的情况下上传文件。
方法1：插件
插件可能是最适合您的，因为它们通常经过良好测试并且相对没有错误，并且几乎不需要任何工作即可运行。您可以使用许多插件，我在下面列出了它们。
j查询文件上传器
多文件上传插件
迷你多文件上传
j查询文件上传
方法2：其他堆栈溢出答案
这类问题已经有很多答案。我在下面列出了一些。
如何异步上传文件？
jQuery AJAX 文件上传 PHP
如何使用 $.ajax(( 输入字段文本和文件上传？
jQuery Ajax 文件上传
文件上传 Ajax PHP
要查看的其他来源
https://www.sanwebe.com/2012/06/ajax-file-upload-with-php-and-jquery
https://www.formget.com/ajax-image-upload-php/
如果您需要更多来源来查看，请尝试搜索：
如何使用 AJAX 和 PHP 上传文件
使用 AJAX 和 PHP 上传文件
将文件发送到 AJAX 和 PHP 上传
文件上传 AJAX 和 PHP
溶液
.HTML
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" onclick="UploadFile()" />
</form>
<progress></progress>
JavaScript 和 AJAX
注意：本节需要 jQuery。请链接最新的 CDN 到您的文档。
function UploadFile()
{
$.ajax({
url: 'upload.php',
type: 'POST',
data: new FormData($('form')[0]),
cache: false,
contentType: false,
processData: false,
xhr: function() {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload)
{
myXhr.upload.addEventListener('progress', function(e)
{
if (e.lengthComputable)
{
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
},
success: function() {
// close modal here
}
});
}
这确实有效，因为我已经测试过它。你需要稍微改变一下你的 PHP。
只需将您的PHP代码和HTML合并到一个文件中，然后以表单形式自行提交即可。
<?php
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
?>
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname"><br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname"><br />
</form>
<?
echo "Hello, ".$Fname." ".$Lname.".<br />";
?>