 |
ขอคำแนะนำ เกี่ยวกับการใช้ ajax ส่งรูปและข้อความ มีปัญหาที่ผมไม่สามารถส่งฟอร์มได้ |
| |
 |
|
|
 |
 |
|
index.php
Code (PHP)
<html>
<head>
.
.
.
</head>
<body>
.
.
.
<form class="uploadForm" method="post" enctype="multipart/form-data" name="formpost" id="formpost">
<div class="modal-content animate">
<div class="container">
<div class="login-form">
<select class="wide" name="policy" id="policy">
<option data-display="นโยบาย" value="1">นโยบาย</option>
<?php
$srtPolList = "SELECT * FROM `policy` WHERE `pol_id` > 1;";
$queryPolList = $mysqli->query($srtPolList);
foreach ($queryPolList as $row ) {
echo "<option value=".$row['pol_id'].">".$row['pol_name']."</option>";
}
?>
</select>
</div>
<div class="login-form">
<br>ชื่อเรื่อง<br>
<input class="textinput" type="text" name="name">
</div>
<div class="login-form">
<br>เนื้อเรื่อง<br>
<textarea id="subject" name="comment" placeholder="เขียนเรื่องของคุณ"></textarea>
</div>
<div class="login-form">
<br>อัพโหลดภาพ<br>
<input type="file" name="images[]" id="images" multiple="multiple"><br><br>
<button class="au-btn au-btn--block au-btn--green m-b-20" type="submit" value="submit">Save</button>
</div>
<div id="uploadStatus"></div>
</div>
</div>
</form>
.
.
.
<script src="vendor/jquery-3.2.1.min.js"></script>
<script src="js/savepost.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
</body>
</html>
savepost.js
Code (js)
$(document).ready(function() {
$("#savepost").click(function() {
$("#uploadStatus").html('<img style="height:200px;" src="../image/uploading.svg"/>');
$.ajax({
type: "POST",
url: "upload.php",
data: $("#formpost").serialize(),
success: function(result) {
var content = '';
$.each(result, function(i, item){
content = content + "<div class='col-lg-3 col-sm-6'>"
+ "<div class='accomodation_item text-center'>"
+ "<div class='hotel_img'>"
+ "<img class='preview' src='image/" + item.img_preview + "' alt=''>"
+ "<a onclick='viewpopup(" + item.post_id + ")' "
+ "class='btn theme_btn button_hover'>อ่านต่อ</a></div>"
+ "<a href=''><h4 class='sec_h4'>" + item.name
+ " </h4></a></div></div> ";
});
$('#uploadStatus').html(content); }
});
return false;
});
});
upload.php
Code (PHP)
include("setting.php");
header('Content-Type: application/json');
error_reporting(E_ALL);
// we first include the upload class, as we will need it here to deal with the uploaded file
// set variables
$thisdate = date("d");
$thismonth = date("m");
$thisyear = date("Y");
$today = date("Y-m-d");
$timeuploaded = date("hisa");
// File upload configuration
$targetDir = "../upload/".$thisyear."/".$thismonth."/".$thisdate."/";
if (!file_exists($targetDir)) {
mkdir($targetDir,0775, true);
}
$allowTypes = array('jpg','png','jpeg','gif','JPG','PNG','JPEG','GIF');
$images_arr = array();
foreach($_FILES['images']['name'] as $key=>$val){
$image_name = $_FILES['images']['name'][$key];
$tmp_name = $_FILES['images']['tmp_name'][$key];
$size = $_FILES['images']['size'][$key];
$type = $_FILES['images']['type'][$key];
$error = $_FILES['images']['error'][$key];
// File upload path
$fileName = basename($_FILES['images']['name'][$key]);
$targetFilePath = $targetDir . $timeuploaded . $fileName;
// Check whether file type is valid
$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);
//var_dump($fileType);
if(in_array($fileType, $allowTypes)){
// Store images on the server
if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$targetFilePath)){
$images_arr[] = $targetFilePath;
chmod($targetFilePath, 0777);
}
}
}
//var_dump($images_arr);
// Generate gallery view of the images
if($_POST["policy"] > "1") {
$strinsPost = "INSERT INTO post (
`name`,
`comment`,
`img_preview`,
`date`
)
VALUES
(
'".$_POST['name']."',
'".$_POST['comment']."',
'".$images_arr[0]."',
'".$today."'
);";
$mysqli->query($strinsPost);
$post_id = $mysqli->insert_id;
//echo $post_id;
//echo $strinsPost;
$img_id = array();
if(!empty($images_arr)){
foreach($images_arr as $image_src){
$strinsImg = "INSERT INTO images (
`images`
)
VALUES
(
'".$image_src."'
);";
$mysqli->query($strinsImg) ;
$img_id[] = $mysqli->insert_id;
//echo $strinsImg;
}
}
if(!empty($img_id)){
foreach ($img_id as $postins) {
$strinsPost = "INSERT INTO post_movement (
`dept_id`,
`pol_id`,
`post_id`,
`img_id`
)
VALUES
(
'".$_SESSION['dept_id']."',
'".$_POST['policy']."',
'".$post_id."',
'".$postins."'
);";
$mysqli->query($strinsPost);
//echo $strinsPost;
}
}
}
มีปัญหาที่ผมไม่สามารถส่งฟอร์มได้
หากใส่ action="upload.php" ในฟอร์ม จะทำได้ปกติ แต่เมื่อผ่าน ajax ไม่สามารถทำได้ครับ ควรแก้ไขอย่างไรหรือหาข้อมูลเพิ่มจากไหนครับ
Tag : PHP, MySQL, HTML, JavaScript, Ajax, jQuery
|
ประวัติการแก้ไข
2018-08-28 14:54:06
|
 |
 |
 |
 |
| Date :
2018-08-28 11:32:13 |
By :
ciockie |
View :
1258 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
Code (JavaScript)
var formData = new FormData($('#myFormID')[0]);
formData.append('any-custom-form-name', 'any-custom-form-value');
$.ajax({
'url': 'target.php', // เปลี่ยนเอาเอง.
// 'type': 'POST', // ไม่ควรใช้แล้ว ใช้ method แทน.
'method': 'POST',
'data': formData,
// Options to tell jQuery not to process data or worry about content-type. (For ajax upload or required for using with FormData object).
'cache': false,
'contentType': false,
'processData': false,
// 'success': function() {} // ไม่ควรใช้แล้ว ไปใช้ข้างล่างนู่น.
})
.done(function( data, textStatus, jqXHR ) {
})
.fail(function( jqXHR, textStatus, errorThrown ) {
})
.always(function( jqXHR, textStatus, errorThrown ) {
});
http://api.jquery.com/jquery.ajax/
https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload
https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax
|
| |
|
|
| |
| Date :
2018-08-28 15:19:49 |
By :
mr.v |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
