php - 提交表单后,如何获取在 ajax 错误消息中在服务器端处理的错误?
问题描述
问题
我有这些文件:
- upload.php -> 有表单和 ajax
- uploadSubmit.php -> 将数据发送到 video.class.php
- video.class.php -> 处理上传,将其添加到数据库并处理错误
如何获取else
语句中的错误以传输回 upload.php 并显示在 div 中而不刷新页面?
编码:
上传.php
<script type="text/javascript">
$(document).ready(function() {
$('#uploadForm').submit(function(e) {
if($('#video').val()) {
e.preventDefault();
$(this).ajaxSubmit({
target: '#progress-div',
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total, percentComplete){
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").attr('aria-valuenow', percentComplete).css('width', percentComplete + '%');
$("#progress-bar").text(percentComplete + '%');
},
success:function (){
$.ajax({
type: "GET",
url: "getvideourl.php",
dataType: "html",
success: function(response){
$("#responsecontainer").html(response);
$("#result").html('Your video was succesfuly uploaded.' + response);
$("#result").addClass("alert alert-success");
},
error:function (){
$("#responsecontainer").html(response);
$("#result").html('Something went wrong with the upload.');
$("#result").addClass("alert alert-alert");
},
});
},
error:function (){
$("#responsecontainer").html(response);
$("#result").html('Something went wrong with the upload.');
$("#result").addClass("alert alert-alert");
},
resetForm: true
});
return false;
}
});
});
</script>
<div id="result"></div>
<form id="uploadForm" action="uploadSubmit.php" enctype="multipart/form-data" method="POST">
<div class="input-group margin-bottom-sm" style="margin-bottom: 5px;">
<span class="input-group-text"><i class="bi bi-camera-video-fill"></i></i> Select video</span>
<input class="form-control" id="video" type="file" name="video" accept="video/*" placeholder="Video" required/>
</div>
<div class="progress" id="progress-div" style="margin-bottom: 5px;">
<div class="progress-bar" id="progress-bar" role="progressbar" width="0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="input-group margin-bottom-sm" style="margin-bottom: 5px;">
<span class="input-group-text"><i class="bi bi-camera-video-fill"></i></i> Select thumbnail</span>
<input class="form-control" id="thumbnail" type="file" name="thumbnail" accept="image/*" placeholder="Thumbnail" required/>
</div>
<div class="input-group margin-bottom-sm" style="margin-bottom: 5px;">
<span class="input-group-text"><i class="bi bi-chat-right-text-fill"></i></i> Title</span>
<input class="form-control" type="text" name="title" placeholder="Title" required/>
</div>
<label for="description">Description:</label>
<textarea name="description" id="signature"></textarea>
<script>
$('#signature').summernote({
height: 250,
// toolbar
toolbar: [
['font', ['bold', 'italic', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['view', ['fullscreen']],
['help', ['help']]
]
});
</script>
<div class="input-group margin-bottom-sm" style="margin-top: 5px; margin-bottom: 5px;">
<span class="input-group-text"><i class="bi bi-tags-fill"></i></i> Tags</span>
<input class="form-control" type="text" name="tags" placeholder="Separate by comma" />
</div>
<div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div>
</form>
上传提交.php
<?php
include'config.php';
if($_SERVER['REQUEST_METHOD'] == 'POST'){
if(isset($_FILES) && !empty($_FILES)){
$title = $_POST['title'];
$desc = $_POST['description'];
$tags = $_POST['tags'];
echo $video->upload($_FILES, $title, $desc, $tags);
}
else{
echo $toobig;
}
}
else{
die('<img src="https://i.kym-cdn.com/entries/icons/original/000/028/021/work.jpg" />');
}
?>
视频类.php
<?php
//Upload handler
public function upload($file, $title, $desc, $tags){
global $coreLang;
global $videoMessage;
$file = $_FILES['video'];
if(isset($_FILES['thumbnail'])){
$thumbnail = $_FILES['thumbnail'];
}
else{
$thumbnail = '';
}
if($file['error'] === 0){
$mimeType = mime_content_type($file['tmp_name']);
$fileType = explode('/', $mimeType)[0];
if(is_uploaded_file($file['tmp_name'])){
if ($fileType === 'video'){
$sourcePath = $file['tmp_name'];
$filename = $this->rand->String() . uniqid();
$extension = pathinfo($file['name'], PATHINFO_EXTENSION);
$targetPath = "videos/users/" . $filename;
if(move_uploaded_file($sourcePath, $targetPath . '.' . pathinfo($file['name'], PATHINFO_EXTENSION))){
$query = $this->handler->prepare('INSERT INTO videos (u_id, v_filename, v_extension, v_title, v_desc, v_tags) VALUES (:u_id, :v_filename, :v_extension, :v_title, :v_desc, :v_tags)');
try{
$query->execute([
':u_id' => $this->user->getUserId(),
':v_filename' => $filename,
':v_extension' => $extension,
':v_title' => $title,
':v_desc' => $desc,
':v_tags' => $tags,
]);
}catch(PDOException $e){
return $this->errorHandler->dbError();
}
if(!empty($thumbnail)){
$this->uploadThumbnail($thumbnail, $filename);
}
}
else{
return $coreLang['error'];
}
}
else{
$videoMessage['noVideo'];
}
}
else{
return $coreLang['error'];
}
}
elseif($file['error'] === 1){
return $videoMessage['tooBig'];
}
elseif($file['error'] === 4){
return $videoMessage['noFile'];
}
elseif($file['error'] === 7){
return $videoMessage['diskError'];
}
else{
return $coreLang['error'];
}
}
?>
解决方案
我主要通过将Javascript更改为此来解决这个问题:
<script type="text/javascript">
$(document).ready(function() {
$("#btnSubmit").click(function() {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
url: "uploadSubmit.php",
type: 'POST',
data: formData,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$('#status').html('<b> Uploading -> ' + (Math.round(percentComplete * 100)) + '% </b>');
$("#progress-bar").width(Math.round(percentComplete * 100) + '%');
$("#progress-bar").attr('aria-valuenow', Math.round(percentComplete * 100)).css('width', Math.round(percentComplete * 100) + '%');
$("#progress-bar").text(Math.round(percentComplete * 100) + '%');
}
}, false);
return xhr;
},
success: function(data) {
if (data.includes('!=[]_')) {
$("#result").html(data.substr(5));
$("#result").addClass("alert alert-success");
}
else {
$("#result").html(data);
$("#result").addClass("alert alert-danger");
}
},
error: function(data){
},
cache: false,
contentType: false,
processData: false,
resetForm: true
});
return false;
});
});
</script>
之后,我return
将课堂上的所有内容都更改为 anecho
并且它起作用了。
推荐阅读
- assembly - 我应该如何使用命令提示符将文本文件(包含程序)组装到机器代码文件中?
- python - 在 tkinter 中获取选定范围的索引
- angular - 添加了未显示的 ng-select 反应式表单验证消息
- python - ConstBitStream 是否将整个文件加载到内存中?
- docker - 在 Ubuntu VM 上运行 Docker - 由于磁盘空间而不断失败
- python - Django Model Meta 更改在更改 Meta 属性时引发错误
- react-native - 将不同的图像导入图像组件 react-native-svg
- kubernetes - Kubernetes | AWS-EKS | 无法解析主机名
- java - 使用 Java 将 XSLT 与 import/include 语句合并
- javascript - Angular 8 + jQuery/UI 问题更新视图