|
|
|
สอบถามปัญหาการใช้ ajax จากฟอร์มไม่ส่งค่าไป insert ครับ |
|
|
|
|
|
|
|
ขอคำแนะนำจากพี่ ๆ หน่อยครับ คือผมติดตรงที่ input idr_assign_uppf เป็นไอดีของงาน ๆ นี้ และ input iduserss_uppf คือ ไอดีสมาชิก ซึ่งผมจะเก็บเข้าฐานข้อมูลพร้อมกับการอัพโหลดไฟล์เพิ่มเติมครับ แต่ทีนี้ผมใช้การส่งข้อมูลแบบ Ajax ซึ่งก็ไปศึกษามา (มือใหม่เรื่องนี้ครับ) คือผมพยายามนั่งดูทั้งวันก็ไม่เข้าใจว่าทำไมข้อมูลจากไฟล์ index ข้อมูลที่เป็น input idr_assign_uppf และ input iduserss_uppf ไม่ถูกส่งไปยังไฟล์ Upload เพื่อบันทึกไอดีใน Input ข้างต้นลงในฐานข้อมูลไม่ได้ ส่วนการทำงานอื่น ๆ ทำงานได้ปกติครับ ผมรบกวนผู้รู้ช่วยแนะ การแก้ปัญหาการส่งค่า Input ผ่าน Ajax เพื่อส่งไป Insert ลงฐานข้อมูลครับ
ไฟล์ index
Code (PHP)
<form method="post" enctype="multipart/form-data">
<div class="form-group">
<label>File upload :</label>
<input type="file" class="file-upload-default file-upload-info" name="multiple_files" id="multiple_files" multiple>
<div class="input-group col-xs-12">
<input class="form-control file-upload-info" disabled="" placeholder="อัพโหลดไฟล์">
<span class="input-group-append">
<!-- 2 input นี้ ค่าไม่ถูกส่งไปยัง ajax -->
<input type="hidden" class="form-control file-upload-info" id="idr_assign_uppf" name="idr_assign_uppf" value="<?php echo base64_encode($selAssigSend['id_assig']);?>">
<input type="hidden" id="iduserss_uppf" name="iduserss_uppf" value="<?php echo base64_encode($_SESSION['id_us']);?>">
<button class="file-upload-browse btn btn-primary" type="button">อัพโหลดไฟล์</button>
</span>
</div>
</form>
<label>ประเภทไฟล์ที่รองรับ .jpg, png, .gif file allowed</label>
<HR>
<h3 align="center"><b> ไฟล์ของคุณที่อัพโหลด </b></h3>
<span id="error_multiple_files"></span>
<br />
<div class="table-responsive" id="image_table"></div>
</div>
ไฟล์ Ajax บรรทัดที่ 1-75 ที่เกี่ยวข้องกับเคสนี้ครับ (หรือบรรทัดอื่นด้วย ช่วยแนะนำด้วยนะครับ
Code (PHP)
<script>
$(document).ready(function(){
load_image_data();
function load_image_data()
{
$.ajax({
url:"pages/assignments/lib/testt/fetch.php",
method:"POST",
success:function(data)
{
$('#image_table').html(data);
}
});
}
$('#multiple_files').change(function(){
var error_images = '';
var form_data = new FormData();
var files = $('#multiple_files')[0].files;
if(files.length > 10)
{
error_images += 'You can not select more than 10 files';
}
else
{
for(var i=0; i<files.length; i++)
{
var name = document.getElementById("multiple_files").files[i].name;
var ext = name.split('.').pop().toLowerCase();
if(jQuery.inArray(ext, ['gif','png','jpg','jpeg','pdf']) == -1)
{
error_images += '<p>Invalid '+i+' File</p>';
}
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("multiple_files").files[i]);
var f = document.getElementById("multiple_files").files[i];
var fsize = f.size||f.fileSize;
if(fsize > 2000000)
{
error_images += '<p>' + i + ' File Size is very big</p>';
}
else
{
form_data.append("file[]", document.getElementById('multiple_files').files[i]);
}
}
}
if(error_images == '')
{
$.ajax({
url:"pages/assignments/lib/testt/upload.php",
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
beforeSend:function(){
$('#error_multiple_files').html('<br /><label class="text-primary">Uploading...</label>');
},
success:function(data)
{
$('#error_multiple_files').html('<br /><label class="text-success">Uploaded</label>');
load_image_data();
}
});
}
else
{
$('#multiple_files').val('');
$('#error_multiple_files').html("<span class='text-danger'>"+error_images+"</span>");
return false;
}
});
$(document).on('click', '.edit', function(){
var image_id = $(this).attr("id");
$.ajax({
url:"pages/assignments/lib/testt/edit.php",
method:"post",
data:{image_id:image_id},
dataType:"json",
success:function(data)
{
$('#imageModal').modal('show');
$('#image_id').val(image_id);
$('#image_name').val(data.image_name);
$('#image_description').val(data.image_description);
}
});
});
$(document).on('click', '.delete', function(){
var image_id = $(this).attr("id");
var image_name = $(this).data("image_name");
if(confirm("คุณแน่ใจใช่ไหม?? ที่จะลบไฟล์นี้ออก หากแน่ใจกดปุ่ม ตกลง หรือไม่ต้องการลบกด ยกเลิก?"))
{
$.ajax({
url:"pages/assignments/lib/testt/delete.php",
method:"POST",
data:{image_id:image_id, image_name:image_name},
success:function(data)
{
load_image_data();
alert("ระบบได้ลบรูปภาพเรียบร้อยแล้ว กรุณากดปุ่ม ตกลง");
}
});
}
});
$('#edit_image_form').on('submit', function(event){
event.preventDefault();
if($('#image_name').val() == '')
{
alert("Enter Image Name");
}
else
{
$.ajax({
url:"pages/assignments/lib/testt/update.php",
method:"POST",
data:$('#edit_image_form').serialize(),
success:function(data)
{
$('#imageModal').modal('hide');
load_image_data();
alert('Image Details updated');
}
});
}
});
});
</script>
ไฟล์ Upload
Code (PHP)
<?php
//upload.php
include('../b_conn.php');
if(count($_FILES["file"]["name"]) > 0)
{
//$output = '';
sleep(3);
for($count=0; $count<count($_FILES["file"]["name"]); $count++)
{
$file_name = $_FILES["file"]["name"][$count];
$tmp_name = $_FILES["file"]['tmp_name'][$count];
$file_array = explode(".", $file_name);
$file_extension = end($file_array);
$iduserss_uppfile = base64_decode($_POST['iduserss_uppf']);
$idr_assign_uppfile = base64_decode($_POST['idr_assign_uppf']);
if(file_already_uploaded($file_name, $bx_conn))
{
$file_name = $file_array[0] . '-'. rand() . '.' . $file_extension;
}
$location = 'files/' . $file_name;
if(move_uploaded_file($tmp_name, $location))
{
$query = "
INSERT INTO b_fileupp (iduserss_uppf, idr_assign_uppf, image_name, image_description)
VALUES ('".$iduserss_uppf."', '".$idr_assign_uppf."', '".$file_name."', '')
";
$statement = $bx_conn->prepare($query);
$statement->execute();
}
}
}
function file_already_uploaded($file_name, $bx_conn)
{
$query = "SELECT * FROM b_fileupp WHERE image_name = '".$file_name."'";
$statement = $bx_conn->prepare($query);
$statement->execute();
$number_of_rows = $statement->rowCount();
if($number_of_rows > 0)
{
return true;
}
else
{
return false;
}
}
?>
Tag : PHP, MySQL, Ajax
|
ประวัติการแก้ไข 2022-02-23 00:04:44
|
|
|
|
|
Date :
2022-02-23 00:02:09 |
By :
ICE_CC |
View :
771 |
Reply :
1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ฝั่ง client ลองใช้ form submit event (ใส่ id/class ให้มันจะได้อ้างอิงง่าย)
debug ใน console
ฝั่ง server เช็ค $_POST/$_GET
debug โดย print/echo/var_dump ค่าออกมาดู
|
|
|
|
|
Date :
2022-02-23 09:03:50 |
By :
009 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 03
|