（注意：更新标题以更好地匹配问题）
我正在努力为ajax聊天添加图片上传功能，我已经编写了HTML和PHP（基本上是copied from W3Schools）来执行此操作。我在服务器上设置了一个测试HTML页面，用于测试图像上传，并且工作得很好 - 表单有效，文件在上传图像时上传了＃34;按下按钮（执行PHP上传代码）。但是，一旦上传完成，页面将切换到包含upload.php文件URL的空白页面。
我目前正在使用HTML中的模式初始隐藏图片上传表单，并且仅在＆＃34;图像＆＃34;按下聊天按钮。代码非常简单，正如我所说的基本上与上面链接中看到的相同，但放在一个模态中。
在有人投诉之前，我知道PHP很容易被利用，并且在放到网站上时可能会很危险，但在我的案例中，这已被确定为非问题。
以下是图片上传模式的代码。请原谅所有内嵌CSS，我最终会把它移到自己的样式表中，但一直在使用in-line进行开发。请注意，display设置为block以进行调试。对于实时站点，它将被设置为none，并且使用javascript函数将其设置为在＆＃34; Image＆＃34;在聊天模块中按下按钮。
<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>
更新 以下是upload.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>
答案 0 :(得分：1)
插件可能是最适合您的，因为它们通常经过良好测试并且相对没有bug，并且几乎不需要任何工作来使其运行。您可以使用许多插件，我在下面列出了它们。
这类问题有很多答案。我在下面列出了一些。
How can I upload files asynchronously?
How to use $.ajax() for input field text AND FILE upload?
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。
答案 1 :(得分：-1)
只需将您的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 />";
?>