Question

我写了一个脚本，允许我很好地添加房间名称，描述等。它使用jquery自动保存并附加额外的表单。除了我尝试使用<input type="file">时，这一切都非常完美。我并不特别想使用已经存在的插件，因为当我单击save /自动保存被触发时，可见表单中的所有数据都会使用php和mysqli自动保存或更新到数据库中，然后返回每个插入ID，这一点很重要打破，并使用插件可能会破坏我的系统，因为它的工作方式我现在需要它。

理想情况下，我想在保存到数据库的每个表单的每个文件输入中实现相关文件名，就像其他表单信息一样，然后触发上传到文件夹。我希望我能尽力解释这一点，这有点令人困惑

以下是我的所有相关代码。如果你能摆脱任何光明，我将非常感激！

表单页面：

<body>
    <div id="formHolder">
        <div class="addItem">
            <form method="post" action="add_room.php">
                <label for="itemName[]">Item</label>
                <input type="text" name="itemName[]">
                <label for="itemCondition[]">Condition</label>
                <input type="text" name="itemCondition[]">
                <input type="file" name="itemPhoto[]">
                <input type="hidden" name="itemId[]" value="">
                <input type="hidden" name="itemParent[]" value="<?=$_GET['room']?>">
                <div class="saveIcon" style="display: none; color: green;">SAVED!</div>
                <div class="save">Save Item</div>
            </form>
        </div>
    </div>
    <div id="addForm">Add another room</div>
    <br><br>
    <div id="message"></div>
</body>

jQuery的：

<script>
    function postForm(form) {
        var $this = $(form);
        var string = $this.serialize();
        $.ajax({
            type: "POST",
            url: "add_room.php",
            data: string,
            cache: false,
            success: function(data){
                var saveIcon = $this.find('.saveIcon');
                $this.find('[type=hidden]').val(data);
                saveIcon.fadeIn(750);
                saveIcon.delay(500).fadeOut(750);
                $('#message').text('The id of the inserted information is ' + data);
            }
        });
    }

    function autosave() {
        $('form').each(function() {
            postForm(this);
        });
    }
    setInterval(autosave, 10 * 1000);

    $(document).ready(function() {
        $('body').on('click', '.save', function(e) {
            postForm($(this).closest('form').get(0));
        });

        $('#addForm').on('click', function(){
            $('<form method="post" action="add_room.php"><label for="itemName[]">Item</label><input type="text" name="itemName[]"><label for="itemCondition[]">Condition</label><input type="text" name="itemConition[]"><input type="file" name="itemPhoto[]"><input type="hidden" name="itemId[]" value=""><input type="hidden" name="itemParent[]" value="<?=$_GET["room"]?>"><div class="saveIcon" style="display: none; color: green;">SAVED!</div><div class="save">Save Item</div></form>').fadeIn(500).appendTo('.addItem');
        });
    });
</script>

PHP：

<?PHP

    require_once('dbConfig.php');

    $item = $_POST['itemName'];
    $condition = $_POST['itemCondition'];
    $photo = $_POST['itemPhoto'];
    $id = $_POST['itemId'];
    $parentId = $_POST['itemParent'];

    foreach($item as $key => $val) {

        if(!$id[$key]) {

            if ($stmt = $db->prepare("INSERT test (test_title, test_desc, test_parent, test_photo) VALUES (?, ?, ?, ?)"))
            {
                // Use an s per variable passed to the string, example - "ss", $firstname, $lastname
                $stmt->bind_param("ssis", $val, $condition[$key], $parentId[$key], $photo[$key]);
                $stmt->execute();
                $stmt->close();

                echo $db->insert_id;
                //echo "success";
            }
            // show an error if the query has an error
            else
            {
                echo "ERROR: Could not prepare Insert SQL statement.";
            }

        } 
            else
        {
            if ($stmt = $db->prepare("UPDATE test SET test_title = ?, test_desc = ?, test_photo = ? WHERE test_id = ?"))
            {
                // Use an s per variable passed to the string, example - "ss", $firstname, $lastname
                $stmt->bind_param("ssi", $val, $photo[$key], $id[$key]);
                $stmt->execute();
                $stmt->close();

                echo $id[$key];
                //echo "success";
            }
            // show an error if the query has an error
            else
            {
                echo "ERROR: Could not prepare Update SQL statement.";
            }
        }

    }

?>

在现有脚本中上传Ajax文件

0 个答案: