【发布时间】：2020-07-02 08:29:37
【问题描述】：
我正在尝试将图像上传到 phpmyadmin 数据库并选择 BLOB 类型用于数据库中的图像存储，我正在尝试使用 jQuery 上传图像，但问题是我的 new FormData(this) 不是表单中的任何值并且由于在进入控制器功能后 if 没有进入 if condition 并移向 else 并在发生某些错误时返回响应。
我尝试了许多不同的方法来传递数据，但都没有奏效：
- 数据：
new FormData(this), - 数据：
new FormData($('#upload_image')[0]), - 数据：
{ fileName: $("input[name='imageFile']").val().split("\\").pop() } - 数据：
{ file: $("input[name='imageFile']").val() }
我的观点
<!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);
}
}
【问题讨论】：
标签： php ajax codeigniter image-upload