Я пытаюсь загрузить изображение в базу данных phpmyadmin и выбрать тип BLOB для хранения изображений в базе данных. Я пытаюсь загрузить изображение, используя jQuery, но проблема заключается в том, что мои new FormData(this) не имеют никаких значений в и после этого после входа в функцию контроллера if не входит в if condition и перемещается к другому и возвращает ответ, когда произошла какая-то ошибка.
Я пробовал много разных способов передачи данных, но ни один из них не работает:
- данные:
new FormData(this), - данные:
new FormData($('#upload_image')[0]), - данные:
{ fileName: $("input[name='imageFile']").val().split("\\").pop() } - данные:
{ file: $("input[name='imageFile']").val() }
My View
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/e26d097cd9.js"></script>
</head>
<body>
<div class="container">
<br><br><br>
<h3 class="text-center">Uploading Image Using AJAX</h3>
<div id="message"></div>
<form method="POST" id="upload_image" enctype="multipart/form-data">
<input type="file" name="imageFile" id="image_file">
<br><br>
<button type="submit" class="btn btn-info" name="upload" id="upload">Upload </button>
</form>
<div class="uploaded_image">
</div>
</div>
<!-- <script type="text/javascript" src="<?php echo base_url(); ?>assets/bootstrap/js/jquery.js"></script> -->
<script type="text/javascript" src="<?php echo base_url(); ?>assets/bootstrap/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#upload_image').submit(function(e){
// $('#upload_image').on('submit', function(e){
e.preventDefault();
// var formData = $('#uploaded_image').serialize();
// alert(formData);
if($('#image_file').val() == ''){
alert('Please Attach a File');
}
else{
// alert("Hello");
$.ajax({
url: "<?php echo base_url(); ?>main/ajax_upload",
type: "POST",
// data:new FormData(this),
data: new FormData($('#upload_image')[0]),
// data: {
// fileName: $("input[name='imageFile']").val().split("\\").pop(),
// // file: $("input[name='imageFile']").val()
// },
// data: new FormData($('#upload_image')[0]),
contentType: false,
cache: false,
processType: false,
dataType: 'JSON',
beforeSend: function(){
$('#upload').append('<i class="fa fa-spinner fa-spin"></i>');
},
success: function(data){
$('#upload .fa-spinner').remove();
$('#uploaded_image').html(data);
$('#message').html(data.message);
}
});
}
});
</script>
</body>
</html>
Мой контроллер
public function ajax_upload(){
// echo "<script>alert('hello')</script>";
if(isset($_FILES['image_file']["name"])){
// if(isset($_FILES['imageFile'])){
$config['upload_path'] = './upload/';
$config['allowed_types'] = 'jpg|jpeg|png|gif';
$this->load->library('upload', $config);
if(!$this->upload->do_upload('imageFile')){
// echo $this->upload->display_errors();
$error['message'] = $this->upload->display_errors();
echo json_encode($error);
}
else{
$data = $this->upload->data();
// echo "<img src=" . base_url() . "upload/" . $data["file_name"] . ">";
echo '<img src="'.base_url().'upload/'.$data["file_name"].'">';
}
}
else{
$error['message'] = "An Error Occured";
echo json_encode($error);
}
}