javascript - 使用 ajax 以一种形式通过输入文件和文本发布
问题描述
我使用 ajax 在表单中发布文件和文本,当我同时使用文件和文本输入时,我遇到了麻烦,这是我的表单:
<form action="insertbook.php" method="post" id="addBookForm" enctype="multipart/form-data">
<table >
<!-- 1- IMAGE -->
<tr>
<td>Image:</td>
<td>
<input accept="image/gif, image/png, image/jpeg, image/jpg"
type="file" name="img_data" id="img_data">
</td>
</tr>
<!-- 2- NAME-->
<tr>
<td>Book Name: </td>
<td >
<input type="text" name="title" id="title">
</td>
</tr>
<!-- 3- CATEGORY -->
<tr>
<td>Book Cat: </td>
<td>
<select id="cat_dropdown" onchange="selectionCatchange()">
<?php for ($i=0; $i< sizeof($cats); $i++ ) {
echo '<option value="'.$cats[$i]['id'].'" >'. $cats[$i]['cat_name'] .'</option>';
} ?>
</select>
<?php echo
'<input id="cat_id" name="cat_id" value="'. $cats[0]['id'] .'" type="hidden">' ;
?>
</td>
</tr>
<!-- SUBMIT -->
<tr>
<th colspan="2" >
<input id="insertbook" type="submit" name="submit" >
</th>
</tr>
</table>
</form>
在 Javascript 代码中,我们有:
$("#addBookForm").submit(function(e) {
/* Stop form from submitting normally */
e.preventDefault();
/* Get some values from elements on the page: */
var title = document.getElementById('title').value;
var img_data = $('#img_data').prop('files')[0];
var cat_id = document.getElementById('cat_id').value;
var submit = "submit";
$.ajax({
url: "insertbook.php",
type: "POST",
data: {'title':title,
'img_data':img_data,
'cat_id':cat_id,
'submit':submit
},
dataType:'html',
success: function(data){
console.log(data);
},
error:function(data){
alert(data);
}
});
});
但在 PHP 代码中,如下:
<?php
$conn = mysqli_connect(****);
mysqli_set_charset($conn,"utf8");
if(
isset($_POST['title']) &&
isset($_POST['cat_id']) &&
isset($_POST['submit'])
&&
isset($_FILES['img_data'])
){
$title = $_POST['title'];
$cat_id = $_POST['cat_id'];
// THIS SECTION RELATE TO IMAGE UPLOAD
$name_img = basename($_FILES['img_data']['name']);
$type_img = strtolower($_FILES['img_data']['type']);
$data_img = file_get_contents($_FILES['img_data']['tmp_name']);
$uploadOk = 1;
// Check file size
if ($_FILES["img_data"]["size"] > 2097152) {
echo "Sorry, your file is too large > 2 Mb!";
$uploadOk = 0;
}
if ($uploadOk == 0) {
echo "Sorry, your image file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (mysqli_query( $conn,"INSERT INTO `books`( `title`, `img`, `cat_id`, `created_at`) VALUES ('$title','".addslashes($data_img)."', '$cat_id', NOW())" )) {
echo "New record created successfully";
} else {
echo "Error: " . "<br>" . mysqli_error($conn);
}
}}else{echo "Please set all information...!!! ";}
?>
但最后我每次都会收到以下错误:
注意:未定义索引:第6行\insertbook.php中的 img_data注意:未定义索引:img_data in
第22行的\insertbook.php
注意:未定义的索引:第23行*\insertbook.php中的 img_data注意:未定义的索引:第24行的***insertbook.php中的img_data警告:file_get_contents(): *中的文件名不能为空第24行的\insertbook.php注意:未定义的索引:第34行的***\insertbook.php中的 img_data新记录创建成功
但最终没有文件存储在数据库中,只创建了一条空记录,希望您能帮助指导我解决问题。谢谢
解决方案
你应该试试这个
从标签元素中删除action
method
和enctype
属性。from
尝试使用new FormData()
ajax 发送数据。
$("#addBookForm").on('submit', function (e) {
e.preventDefault();
var formData = new FormData(this);
formData.append('submit', 'submit');
$.ajax({
type: 'POST',
url: 'insertbook.php',
data: formData,
contentType: false,
cache: false,
processData: false,
success: function (data) {
console.log(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("Some problem occurred, please try again.");
}
});
});
推荐阅读
- algorithm - 以下三重嵌套for循环的时间复杂度是多少?
- python - 如何从实例变量中删除 html 元素
- php - 无法从页面传递php 5整数
- vue.js - 使用自动注册的动态导入的 Vue 组件进行代码拆分
- typescript - 创建一个类型,该类型定义包含特定嵌套属性的对象的键
- java - 发送 url 编码信息时出现“th:if”问题
- python - 从 Keras 模型的中间进行预测
- java - 为什么这段代码没有按照 JSR133 的建议进入无限循环?
- c - 如何将 char cyrillic 数组转换为每个 char 符号的 unicode 代码数组?
- javascript - 如何让 Xterm.js 正确调整大小?