Question

我正在尝试基于弹出模式进行多次间接上传，并提供提供输入详细信息的预览表。

我的方法是将来自弹出模式的输入转移到主窗体上表主体每一行内部的隐藏输入。问题是，如何从弹出窗口中获取文件输入并将其移至表内的隐藏输入（我将脚本设计为删除父行，因此也将删除隐藏输入）。我已经读过一些有关克隆输入并将真实输入移至隐藏形式的内容，但是我不确定如何执行或放置在何处。

脚本：

$(document).ready(function(){
    //adding and removing table row dynamically based on modal input
    $(".fruit-add").click(function(){
        var fruit_pic = $("#fruit_pic_input").val();
        var fruit_pic_name = $("#fruit_pic_input").val().replace(/C:\\fakepath\\/i, '');
        var fruit_name = $("#fruit_name_input").val();
        var markup = "<tr><td>" + fruit_pic_name + "</td><td>" + fruit_name + "</td><td>" + "<input type='hidden' name='fruit_name[]' id='fruit_name' value="+ fruit_name +"></div>" + "<button type='button' class='fruit-remove'> Delete </button>" +  "</td></tr>";
        //this is where i put my hidden input
        $(".fruit-table").append(markup);
    });
    $("body").on("click",".fruit-remove",function(){
        $(this).parents("tr").remove();
    });
});

主要形式：

<form method="post" action="add-fruit" id="mainForm" enctype="multipart/form-data"> 
    {{ csrf_field() }}
    <div class="form-group">
        <label> Fruits </label>
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>Picture</th>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="fruit-table">
                </tbody>
            </table>
        </div>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addFruit">
            Add fruit
        </button>
    </div>
    <div class="form-group text-right">
        <a href="/" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-success">Save</button>
    </div>
</form>

模式：

<!-- Modal -->
<div class="modal fade" id="addFruit" tabindex="-1" role="dialog" aria-labelledby="addFruitLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form id="form_fruit">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addFruitLabel">Fruit</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="fruit_pic_input">Picture</label>
                        <input type="file" accept="image/*" name="fruit_pic_input" id="fruit_pic_input" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="fruit_name_input">Name</label>
                        <input type="text" class="form-control" name="fruit_name_input" id="fruit_name_input" placeholder="Name">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary fruit-add" data-dismiss="modal">Add</button>
                </div>
            </div>
        </form>
    </div>
</div>

此外，我该如何验证我的弹出模式既需要输入又仅接受图像文件？

从弹出模式中获取/移动/克隆文件（图像）输入到表格形式内的隐藏输入

0 个答案: