无法插入图像到数据库与ajax序列化函数

Question

我目前有一个麻烦插入文件输入（图像）到我的数据库，但它返回我空值，当我试图将其插入数据库，其他文本输入已成功插入数据库，但图像除外。

这里是我的Ajax代码，我用做AJAX功能：

$("#testing").confirm({ 
        confirm: function (el) { 
         $.ajax({ 
          url: 'bannerItem.php', 
          data: el.closest('form').serialize(), 
          type: 'post' 

         }).done(function() { 
          if(!alert('Banner Had Successfully Updated.')){document.getElementById('form').reset();} 
         }).fail(function() { 
          //if the post is failed show an error message if you want 
          alert('Some error occur. Please try again later.'); 
         }).always(function() { 
          //this is executed on success and failure 
          $('#myhiddendiv').hide(); 
         }) 
        } 
       }); 

这里是PHP代码：

<?php 
    include 'dbConnection.php'; 

    global $dbLink; 


     $target_file = basename($_FILES['uploaded_file']['name']); 
     $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); 
     //Check image file type 


      // Make sure the file was sent without errors 
      if($_FILES['uploaded_file']['error'] == 0) { 

       //Gather all required data 
       $item_id = $dbLink->real_escape_string($_POST['banner_id']); 
       $name = $dbLink->real_escape_string($_POST['bannerName']); 
       $data = $dbLink->real_escape_string(file_get_contents($_FILES['uploaded_file']['tmp_name'])); 



       //Create the SQL query 
       $query = "INSERT INTO banner_item (banner_item_id, banner_name,banner_data,banner_created) VALUES ('{$item_id}','{$name}','{$data}', NOW() 
        )"; 

       //Execute the query 
       $result = $dbLink->query($query); 

       //Check if it was successfull 
       if($result) { 

        echo 'Name : '.$name.'</br>'; 
        echo 'Result : Success! Your file was successfully added!'; 
       } 
       else{ 
        echo 'Result : Error! Failed to insert the file' 
         . "<pre>{$dbLink->error}</pre>"; 
       } 
      } 
      else { 
       echo'An error accured while thefile was being uploaded. ' 
        . 'Error code: '. intval($_FILES['uploaded_file']['error']); 
      } 


     // Close the mysql connection 
     $dbLink->close(); 


    // Echo a link back to the main page 
    echo '<p>Click <a href="index.html">here</a> to go back</p>'; 
    ?> 

如果我使用的PHP代码withouth的Ajax的功能，一切可以插入到数据库中，但是当我使用ajax函数时，只有图像无法插入到数据库中。

这里是我用来提交价值形态：

<form id="form" action="bannerItem.php" method="POST" enctype="multipart/form-data"> 
            <div class="box-body"> 
             <input type="hidden" name="banner_id" value="1"></input> 
             <div class="form-group" > 
              <label for="bannerName">Banner Name 旗帜名称</label> 
              <input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);"> 
             </div> 
             <div class="form-group"> 
              <label for="exampleInputFile">File input</label> 
              <input type="file" id="uploaded_file" name="uploaded_file" onChange="checkDisabled(testing);"><br> 
              <p class="help-block">Your picture size not more than 2MB. (Only JPEG/JPG/PNG is allowed)</p> 
             </div> 

             <div class="checkbox"> 
              <button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>  
             </div> 
            </div><!-- /.box-body --> 


           </form>     <!-- D 

我一直在寻找周围小时如何在计算器解决这个和谷歌，大多使用XHR2或FORMDATA但我我不确定使用哪一个以及如何将它用于我的代码，因为我仍然是一个使用AJAX和PHP函数的新人。如果我在我的Ajax代码上犯了任何错误，请引导我。谢谢你，祝你有美好的一天:)

Answer 1

你不能通过窗体序列化来上传文件。如果你的浏览器的要求是在IE9可以使用XHR上传或FileAPI插件

例子：

function startUpload() { 
    var fileInput = document.getElementById("fileInput"); 

    if (fileInput.files.length == 0) { 
     alert("Please choose a file"); 
     return; 
    } 

    var progressBar = document.getElementById("progressBar"); 
    var xhr = new XMLHttpRequest(); 

    xhr.upload.onprogress = function(e) { 
     var percentComplete = (e.loaded/e.total) * 100; 
     progressBar.value = percentComplete; 
    }; 

    xhr.onload = function() { 
     if (xhr.status == 200) { 
      alert("Sucess! Upload completed"); 
     } else { 
      alert("Error! Upload failed"); 
     } 
    }; 
    xhr.onerror = function() { 
     alert("Error! Upload failed. Can not connect to server."); 
    }; 

    progressBar.value = 0; 
    xhr.open("POST", "ajax-upload", true); 
    xhr.setRequestHeader("Content-Type", fileInput.files[0].type); 
    xhr.send(fileInput.files[0]); 
} 

更多信息HERE

Answer 2

我解决我的表单数据功能的问题。我知道FireAPI和XHR2可以完成，但对于像我这样的初学者更简单的理解，我认为这是解决我的问题的解决方案。谢谢，我希望我能用我的示例代码来帮助其他人。 :)

这里是我成功地用在我的AJAX代码： //文件和文字上传与FORMDATA功能

  $("form#form").submit(function(){ 
      var formData = new FormData($(this)[0]); 

      $.ajax({ 
       url:'bannerItem.php', 
       type: 'POST', 
       data: formData, 
       async: false, 
       success: function (data) { 
        if(!alert('Banner Had Successfully Updated.')){location.reload();} 
       }, 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 

      return false; 
     });