如何使用动态表单上传文件并使用PHP

时间:2016-02-18 15:29:03

标签: javascript php jquery mysql forms

我有一个动态表单,看起来非常像这样: Dynamic form drawing

我的想法是每次单击“添加行”(在此处使用JQuery)时添加新行,并且每个新行应包含“浏览”按钮,允许为新添加的每个添加的用户上载文件。删除按钮只是删除不需要的行。

我正在使用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>

如果我试图回复$uploadfile,我就没有结果......

print_r($_FILES)的结果是:

    Array
(
    [fields] => Array
        (
            [name] => Array
                (
                    [1] => Array
                        (
                            [file_uploaded] => Array
                                (
                                    [0] => a4.jpg
                                )

                        )

                )

            [type] => Array
                (
                    [1] => Array
                        (
                            [file_uploaded] => Array
                                (
                                    [0] => image/jpeg
                                )

                        )

                )

            [tmp_name] => Array
                (
                    [1] => Array
                        (
                            [file_uploaded] => Array
                                (
                                    [0] => /tmp/phpIaNYYD
                                )

                        )

                )

            [error] => Array
                (
                    [1] => Array
                        (
                            [file_uploaded] => Array
                                (
                                    [0] => 0
                                )

                        )

                )

            [size] => Array
                (
                    [1] => Array
                        (
                            [file_uploaded] => Array
                                (
                                    [0] => 6063
                                )

                        )

                )

        )

)

mysql表(帐户)看起来像:

 id | first | last | email | file_uploaded 

id字段设置为Primary with Autoincrement,其余为Varchar(300)。

我无法弄清楚如何使用这种动态表单上传文件并在mysql中保存路径。

其他一切都很完美。

请有人,请给我一些代码示例,并将这条特定案例的上传文件问题放在正确的路径上?

免责声明:我知道我应该使用PDO和mysqli。我现在正在学习PDO,但我还远未了解它,这就是我在这里使用旧/经典mysql的原因。 此外,大多数代码都是根据本网站上发现的类似问题的各种答案汇总而成。

2 个答案:

答案 0 :(得分:1)

你快到了。您现在的问题只是您正在使用

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

但您的文件输入根本不会被称为userfiles。查看您的$_FILES转储,您应该执行以下操作:

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

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

答案 1 :(得分:0)

@Aioros - 在您的帮助下,我有一个功能齐全的代码:

function c() {
    a();
    b();
}