Javascript 如何使用PHP以动态形式上传文件并将路径/文件名与其他数据一起保存到mysql

我有一个动态表单，看起来很像这样：

这个想法是每次单击“添加行”（这里是usignjquery）时添加一个新行，并且每一新行都应该包含一个“浏览”按钮，允许为每个新添加的用户上传一个文件。“删除”按钮只是删除不需要的行

我使用PHP和MySQL存储输入字段数据和文件路径

我的问题是，我无法理解如何正确实现“上传文件”，以及如何将路径/文件名添加到php/mysql查询中

到目前为止，我的代码如下所示：

<?php
$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "password";
$mysql_db_database = "dynamic";

$dbc = mysql_connect($mysql_db_hostname, $mysql_db_user, 

$mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $dbc) or die("Could not select database");
?>


<?
if (isset($_POST['add_account'])) { 
    if ($_POST['fields']) {
        foreach( $_POST['fields'] as $key=>$fieldArray ) {                          
           // new code added from here
            if (!empty($_FILES)) {

                $uploaddir = 'upload/';
                $uploadfile = $uploaddir . basename($_FILES['userfiles']['name']);


                if (move_uploaded_file($_FILES['userfiles']['tmp_name'], $uploadfile)) {
                    echo "File is valid, and was successfully uploaded.<br />";
                } else {
                    echo "File not uploaded!<br />";
                }               

            }
            // new code added until here

            $keys = array_keys($fieldArray);
            $values = array_map("mysql_real_escape_string",$fieldArray);                
            $q = "INSERT INTO accounts (".implode(',',$keys).", file_uploaded) VALUES ('".implode('\',\'',$values)."', ".$uploadfile." )";
            $r = mysql_query($q, $dbc );                                            

        }
    }
    echo "<i><h2><strong>" . count($_POST['fields']) . "</strong> Account(s) Added</h2></i>";       
}
?>

<?php if (!isset($_POST['add_account'])) { ?> 

<form method="post" action="" enctype="multipart/form-data">

<p id="add_field"><a class="btn btn-default" href="#">Add Rows</a></p>
<table id="myTable">
<thead>
    <tr>
        <th>#</th>
        <th>First Name:</th>
        <th>Last Name:</th>
        <th>E-mail:</th>
        <th>Upload file</th>            
        <th></th>           
    </tr>
</thead>
<tbody id="container">
</tbody>
</table>

<input class="btn btn-default" type="submit" name="add_account"  value="Submit"  />
</form>
<?php } ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

    $(function(){
        var counter = 0;
        $('p#add_field').click(function(){
            counter += 1;
            $('#container').append(
            '<tr><td>' + counter + '</td><td><input name="fields['+counter+'][first]" type="text"  placeholder="First Name" required/></td><td><input name="fields['+counter+'][last]" type="text"  placeholder="Last Name" required/></td><td><input name="fields['+counter+'][email]" type="email"  placeholder="email" required/></td><td><input id="userfile" name="fields['+counter+'][file_uploaded][]" type="file" /></td><td><input button" value="Remove" onclick="delRow(this)"></td></tr>');

        });
    });

    function delRow(currElement) {
         var parentRowIndex = currElement.parentNode.parentNode.rowIndex;
         document.getElementById("myTable").deleteRow(parentRowIndex);
    }

</script>

 id | first | last | email | file_uploaded 

mysql表（帐户）如下所示：

<?php
$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "password";
$mysql_db_database = "dynamic";

$dbc = mysql_connect($mysql_db_hostname, $mysql_db_user, 

$mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $dbc) or die("Could not select database");
?>


<?
if (isset($_POST['add_account'])) { 
    if ($_POST['fields']) {
        foreach( $_POST['fields'] as $key=>$fieldArray ) {                          
           // new code added from here
            if (!empty($_FILES)) {

                $uploaddir = 'upload/';
                $uploadfile = $uploaddir . basename($_FILES['userfiles']['name']);


                if (move_uploaded_file($_FILES['userfiles']['tmp_name'], $uploadfile)) {
                    echo "File is valid, and was successfully uploaded.<br />";
                } else {
                    echo "File not uploaded!<br />";
                }               

            }
            // new code added until here

            $keys = array_keys($fieldArray);
            $values = array_map("mysql_real_escape_string",$fieldArray);                
            $q = "INSERT INTO accounts (".implode(',',$keys).", file_uploaded) VALUES ('".implode('\',\'',$values)."', ".$uploadfile." )";
            $r = mysql_query($q, $dbc );                                            

        }
    }
    echo "<i><h2><strong>" . count($_POST['fields']) . "</strong> Account(s) Added</h2></i>";       
}
?>

<?php if (!isset($_POST['add_account'])) { ?> 

<form method="post" action="" enctype="multipart/form-data">

<p id="add_field"><a class="btn btn-default" href="#">Add Rows</a></p>
<table id="myTable">
<thead>
    <tr>
        <th>#</th>
        <th>First Name:</th>
        <th>Last Name:</th>
        <th>E-mail:</th>
        <th>Upload file</th>            
        <th></th>           
    </tr>
</thead>
<tbody id="container">
</tbody>
</table>

<input class="btn btn-default" type="submit" name="add_account"  value="Submit"  />
</form>
<?php } ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

    $(function(){
        var counter = 0;
        $('p#add_field').click(function(){
            counter += 1;
            $('#container').append(
            '<tr><td>' + counter + '</td><td><input name="fields['+counter+'][first]" type="text"  placeholder="First Name" required/></td><td><input name="fields['+counter+'][last]" type="text"  placeholder="Last Name" required/></td><td><input name="fields['+counter+'][email]" type="email"  placeholder="email" required/></td><td><input id="userfile" name="fields['+counter+'][file_uploaded][]" type="file" /></td><td><input button" value="Remove" onclick="delRow(this)"></td></tr>');

        });
    });

    function delRow(currElement) {
         var parentRowIndex = currElement.parentNode.parentNode.rowIndex;
         document.getElementById("myTable").deleteRow(parentRowIndex);
    }

</script>

 id | first | last | email | file_uploaded 

id字段通过Autoincrement设置为主字段，其余字段为Varchar（300）

我不知道如何使用这种动态表单在mysql中上传文件和保存路径

其他一切都很完美

有人，请给我一些代码的例子，把我放在正确的路径与上传文件的问题，为这个具体的情况

免责声明：我知道我应该使用PDO和mysqli。我现在正在学习PDO，但我还远远不了解它，这就是我在这里使用老/经典mysql的原因。

---

此外，大部分代码都是从本网站上找到的关于类似问题的各种答案中拼凑而成。

您就快到了。您现在的问题很简单，就是您正在使用

$_FILES['userfiles']['name']

但是您的文件输入根本不被称为

userfiles

。查看您的

$\u文件

转储，您应该执行以下操作：

$_FILES['fields']['name'][$key]['file_uploaded']

---

如果我正确阅读了您的表单和代码，那就是。这是一个有点奇怪的数组结构，因为您在表单中选择了一种奇怪的输入名称，但它应该可以工作。

@Aioros-在您的帮助下，我有一个完整的功能代码：

<?php
$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "password";
$mysql_db_database = "dynamic";

$dbc = mysql_connect($mysql_db_hostname, $mysql_db_user, 

$mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $dbc) or die("Could not select database");
?>


<?
if (isset($_POST['add_account'])) { 
    if ($_POST['fields']) {
        foreach( $_POST['fields'] as $key=>$fieldArray ) {                          

           if (!empty($_FILES)) {

                $uploaddir = 'upload/';  // Upload directory 

                if (!is_dir($uploaddir)) // Check if upload directory exist
                {
                    mkdir($uploaddir);  // If no upload directory exist, create it
                }

                $newname = time(); // Returns the current time measured in the number of seconds since the Unix Epoch (January 1 1970 00:00:00 GMT),  to use it as part of the name
                $random = rand(100,999); // Getting some random numbers to add in the file names, to avoid files with the same name         

                $name =  $newname.'-'.$random.'-'.$_FILES['fields']['name'][$key]['file_uploaded'][0];  // File Name Construction 

                $tempFile = $_FILES['fields']['tmp_name'][$key]['file_uploaded'][0];  // Getting temporary file location and temporary name ( e.g. /tmp/random_string__here )

                $uploadfile = $uploaddir . $name; // Concatenating upload dir name with the file name               

                if (move_uploaded_file($tempFile, $uploadfile)) {  // If file moved from temp to upload location with the name we constructed above
                    echo 'File uploaded to '.$uploadfile.'.<br />';
                } else {
                    echo 'File not uploaded!<br />';
                }               

            }

            $keys = array_keys($fieldArray);
            $values = array_map("mysql_real_escape_string",$fieldArray);                
            $q = "INSERT INTO accounts (".implode(',',$keys).", file_uploaded) VALUES ('".implode('\',\'',$values)."', ".$uploadfile." )";
            $r = mysql_query($q, $dbc );                                            

        }
    }
    echo "<i><h2><strong>" . count($_POST['fields']) . "</strong> Account(s) Added</h2></i>";       
}
?>

<?php if (!isset($_POST['add_account'])) { ?> 

<form method="post" action="" enctype="multipart/form-data">

<p id="add_field"><a class="btn btn-default" href="#">Add Rows</a></p>
<table id="myTable">
<thead>
    <tr>
        <th>#</th>
        <th>First Name:</th>
        <th>Last Name:</th>
        <th>E-mail:</th>
        <th>Upload file</th>            
        <th></th>           
    </tr>
</thead>
<tbody id="container">
</tbody>
</table>

<input class="btn btn-default" type="submit" name="add_account"  value="Submit"  />
</form>
<?php } ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

    $(function(){
        var counter = 0;
        $('p#add_field').click(function(){
            counter += 1;
            $('#container').append(
            '<tr><td>' + counter + '</td><td><input name="fields['+counter+'][first]" type="text"  placeholder="First Name" required/></td><td><input name="fields['+counter+'][last]" type="text"  placeholder="Last Name" required/></td><td><input name="fields['+counter+'][email]" type="email"  placeholder="email" required/></td><td><input id="userfile" name="fields['+counter+'][file_uploaded][]" type="file" /></td><td><input type="button" value="Remove" onclick="delRow(this)"></td></tr>');

        });
    });

    function delRow(currElement) {
         var parentRowIndex = currElement.parentNode.parentNode.rowIndex;
         document.getElementById("myTable").deleteRow(parentRowIndex);
    }

</script>

尝试打印查询以查看它们是否正确：echo$q；嗨，我做了，但是文件部分没有打印。这是输出：
code
Array（[0]=>first[1]=>last[2]=>email）Array（[first]=>aa[last]=>ss[email]=>ddd@x.com）数组（[first]=>aa[last]=>ss[email]=>ddd@x.com）在帐户（第一个、最后一个、电子邮件）中插入值（'aa'、'ss'、'ddd@x.com')
code
不确定它是否相关，但在我看来，您添加了多个具有相同id的
td
s，这肯定是不对的。@Aioros-不相关，完全删除那些
td
上的id不会影响结果。测试并更新了我问题中的代码以反映此更改。Ok。无论如何，上载的文件信息不在
$\u POST
数组中。我建议你通读这些文件：你是对的。我的剧本现在开始工作了。我会尽快用工作代码更新帖子。非常感谢。