ajax圖像上傳到數據庫

我無法通過ajax上傳圖像，每當我點擊提交按鈕時它總是重定向到頁面，並且數據也沒有添加到數據庫中。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(); 
    } 
}

注：模型（查詢）保存數據庫是正確的，所以我沒有將它張貼

來源

2016-03-15 yankie palans

那麼，你可以請參閱1.您的http服務器錯誤日誌文件和2.您的瀏覽器開發控制檯？ – arkascha

沒有關於2. 但如何查看http服務器錯誤日誌文件 –

這是不可能的。至少您必須在瀏覽器控制檯中看到網絡請求。 – arkascha

ImageUploadForm = imageUploadForm

修正了拼寫錯誤導致dead code（form標籤）來運行和東西！應該按照您的預期工作。因爲這個問題，您的瀏覽器，開發工具，網絡選項卡應該顯示一個POST而不是XHR。

來源

2016-03-15 09:23:09 user1133275

這並不重要，因爲'e.preventDefault（）;'阻止了正常的表單提交。 – arkascha

我不會完全稱之爲「死碼」，但這裏的重點是：_this根本沒有回答這個問題._ – arkascha

看起來很棒。仍然不知道爲什麼你稱之爲「死代碼」，但無論如何，OP應該在瀏覽器控制檯中看到POST請求。順便說一句：「更新，使其更清晰......」讓我們面對它：這是一個強烈的_different_答案你以前寫的:-) – arkascha

試試這個

$('#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 
}

您可以處理它，就像你的控制器上的直接形式提交

來源

2016-03-15 10:57:44

ajax圖像上傳到數據庫

回答

相關問題