ajax图片上传到数据库答案

【问题标题】：ajax image upload to databaseajax图片上传到数据库
【发布时间】：2016-03-15 09:16:30
【问题描述】：

我无法通过 ajax 上传图片，每当我点击提交按钮时，它总是重定向到页面，并且数据也没有添加到数据库中。

表格

<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>" id="ImageUploadForm" enctype="multipart/form-data">
 <input type="text" name="caption" id="caption">
 <input type="file" name="image" id="ImageBrowse"/>
 <input type="submit" class="btn btn-success" value="Save" />  
</form>

ajax

$(document).ready(function (e) {
    $("#imageUploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "<?php echo base_url();?>adminpromisess/addgal",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data) {
                alert(data);
                //$("#gallery-form").load(".gallery-form");
            },
            error: function() {
            }           
        });
    }));
});

将数据添加到数据库函数（控制器）

 public function addgal(){
     $caption = $this->input->post('caption');
     $promises = 00;
     $description = $this->input->post('description');
     $image = $_FILES['image']['name'];
     if(move_uploaded_file($_FILES['image']['tmp_name'], 'assets/img/upload/promises_image/'.$image)){

         $data = array(
         'caption' => $caption,
         'promises' => $promises,
         'gal_desc' => $description,
         'image' => $image
         );
         $result = $this->adminpromisesmodel->addGallery($data);
     }else{
         echo "Fail to upload file";
         die();
     }
 }

注意：保存数据库的模型（查询）是正确的，所以我没有发布它

【问题讨论】：

那么您可以在 1. 您的 http 服务器错误日志文件和 2. 您的浏览器开发控制台中看到什么？
没有关于 2. 但是如何查看 http 服务器错误日志文件
那是不可能的。至少您必须在浏览器控制台中看到网络请求。
关于 http 服务器错误日志文件 - 嗯，它是您的 http 服务器写入的日志文件，其中转储所有 php 和网络问题（在正常设置中）。默认位置类似于/var/log/apache2/error.log。所以你必须在服务器上找到它，并且在进行 php 开发时应该始终监视它。最好是使用tail -f <logfile> 之类的东西来完成这样的任务......
您打错字了（请参阅我的回答），是的，您应该学习使用浏览器和服务器日志，因为这样可以轻松解决此类问题。

标签： javascript php jquery ajax

【解决方案1】：

试试这个

$('#imageUploadForm').on('submit', function(ev){
  ev.preventDefault();
  var forms = document.querySelector('form#imageUploadForm');
  var request = new XMLHttpRequest();
  var formDatas = new FormData(forms);
  request.open('post','yourControllerFunction');
  request.send(formDatas);
  request.onreadystatechange = function() {
  if (request.readyState === 4) {
    if (request.status === 200) {

    //Request was OK show success message

    } else {
    // Request not OK, show error message

    }
  }
});

在控制器的操作中（它是一个 cakephp 代码）

if($this->request->is('post')){
   $data = $this->request->data;
   echo "<pre>",print_r($data),"</pre>";
   //You should be able to see file data in this array
}

您可以像在控制器上直接提交表单一样处理它

【讨论】：

【解决方案2】：

ImageUploadForm != imageUploadForm

修复导致dead code（表单标签）运行的拼写错误，一切都应该如您所愿。由于该问题，您的浏览器、开发工具、网络选项卡应该显示 POST 而不是 XHR。

【讨论】：

这并不重要，因为e.preventDefault(); 阻止了正常的表单提交。
我不会完全称其为“死代码”，但这里的重点是：这根本无法回答问题。
很好看。仍然不知道您为什么称其为“死代码”，但无论如何，OP 确实应该在浏览器控制台中看到一个 POST 请求。顺便说一句：“更新以使其更清晰......”让我们面对现实吧：这是对您之前所写内容的完全不同答案:-)