Sql INNER JOIN不能正常工作，我如何使用Jquery/Ajax在html表单上显示上传的文件

我想使用SQL INNER JOIN从2表中获得结果，但它只显示第一个结果而不是其他一个。如果我选择其他数据，那么它会显示以下错误消息:

警告:为中的foreach()提供了无效参数D:'software installed'xampp'htdocs'contact-management'getContactDetails.php on line 14
[]

功能描述:

我有2表在我的数据库。

1. contact_details :

   cdid, family_name, given_name, work_phone, mobile_phone, email, email_private, cid
   

2. contact_docs :

   docid, cdid, file_name, file_des
   

我显示所有联系人(仅family_name)从数据库。在选择每个联系人之后，它使用Jquery/ajax显示/加载所有联系人详细信息，这显示在HTML FORM上。现在它在html input type = text字段上显示contact_details数据。但我还需要show contact_docs数据，这实际上是文件。

因此，当我使用jQuery/ajax发送请求到服务器时，我必须使用SQL内部连接查询来获得基于id (cdid)的两个表的结果。但不幸的是，我的内部连接查询不能正常工作。如果我选择不同的联系人，则不会显示html表单上的所有联系人详细信息数据。只显示第一结果。

我的问题是:

1. 如何修复这个内部连接查询?

2. 如何在表单上显示上传的文件(文件链接会更好)当整个表单加载2表的所有数据时?

注意:我可以成功地编辑/插入数据到数据库，但关于显示数据与文件的问题。

这是我的代码:

页面:

<div id="showContactsDetails">
<h2>Individual Record Details</h2>
    <div style=" visibility:hidden;" id="visiable">    
    <span class="mandatory"><sub>* Required</sub></span>
    <!--success update -->  
    <div id="success"></div>
<form action="" method="post" enctype="multipart/form-data" id="all_contact_details">
<table width="450" border="0" cellspacing="0" cellpadding="0">  
  <input type="hidden" name="cdid" id="cdid"/>
  </tr>     
<tr>
    <td>Company Name</td>
    <td><input type="text" name="company_name" id="company_name" disabled="disabled"/></td>
  </tr>
  <tr>
    <td>Family name</td>
    <td><input type="text" name="family_name" id="family_name"/></td>
  </tr>
  <tr>
    <td>Given name</td>
    <td><input type="text" name="given_name" id="given_name"/></td>
  </tr>
  <tr>
    <td>Work Phone</td>
    <td><input type="text" name="work_phone" id="work_phone"/></td>
  </tr>
  <tr>
    <td>Mobile Phone</td>
    <td><input type="text" name="mobile_phone" id="mobile_phone"/></td>
  </tr>
  <tr>
    <td>Email address</td>
    <td><input type="text" name="email" id="email"/></td>
  </tr>
  <tr>
    <td>Private email address</td>
    <td><input type="text" name="email_private" id="email_private"/></td>
  </tr>
  <tr>
    <td>Upload your document</td>
    <td><input type="text" name="file_des_1" id="file_des1" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input name="file1" type="file" id="file" class="file"/></td>
    <span class="file_des_1"></span>
  </tr>
  <tr>
    <td></td>
    <td><input type="text" name="file_des_2" id="file_des2" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file" name="file2" id="file_2" class="file"/></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="text" name="file_des_3" id="file_des3" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file"  name="file3" id="file_3" class="file"/></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="text" name="file_des_4" id="file_des4" placeholder="short description of your document" class="shor"/><span class="mandatory"><sup>*</sup></span></td>
  <tr>
    <td></td>  
    <td align="left"><input type="file"  name="file4" id="file_4" class="file"/></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="button" name="submit" value="Update Details" class="submit" id="upload"/></td>
  </tr>  
</table>
</form> 
</div> 
</div><!--showContactsDetails-->

//edit the form....................
<script>
$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
            $("#success").html(data);
            document.getElementById("all_contact_details").reset();

        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});    
//load the html form with all contact details..................................................
function getDetails(id) {
        id = id;        
        $.ajax({        
                url: 'getContactDetails.php',
                type: 'post',             
                data: {'id' : id},
                dataType : 'json',
                success: function( res ) {
                    document.getElementById("visiable").style.visibility = "visible";
                    console.log(res);
                    $.each( res, function( key, value ) {
                        console.log(key, value);
                        $('input[type=text][name='+key+']').val(value);
                        $('input[type=hidden][name='+key+']').val(value);
                        $('textarea[name='+key+']').val(value);
                    });
                }            
        });
    }

</script>

<?php
ob_start();
require_once("config.php");
$id  = (int) $_POST['id'];
$sql = mysql_query("SELECT contact_details.cdid, contact_details.family_name, contact_docs.file_name FROM contact_details INNER JOIN contact_docs ON contact_details.cdid = contact_docs.cdid WHERE contact_docs.cdid = '$id'");
$res =  mysql_fetch_array($sql);
$data = array();
foreach( $res as $key => $value ) { 
    $data[$key] = $value;   
}
echo json_encode($data);
?>