Получение / перемещение / клонирование файла (изображения) для ввода из модального всплывающего окна в скрытый ввод в форме таблицы - PullRequest
Новая
       27

Получение / перемещение / клонирование файла (изображения) для ввода из модального всплывающего окна в скрытый ввод в форме таблицы

0 голосов
/ 18 июня 2019

Я пытаюсь сделать множественную косвенную загрузку на основе модального всплывающего окна с таблицей предварительного просмотра, предоставляющей входные данные.

Мой метод заключается в том, что я передаю ввод из модального всплывающего окна в скрытый ввод внутри каждой строки в теле таблицы в моей основной форме. Проблема в том, как я могу получить входной файл из всплывающего окна и переместить его на скрытый вход внутри таблицы (я создаю свой сценарий для удаления родительской строки, поэтому скрытый ввод также будет удален). Я прочитал кое-что о клонировании входных данных и переместил реальный в скрытую форму, но я не совсем уверен, как это сделать или куда поместить.

скрипты: 

$(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>

Кроме того, как мне проверить, что мой мод для всплывающих окон требует ввода данных и принимает только файл изображения?

...