添加文件类型的动态输入字段，并预览答案

【问题标题】：add dynamic input fields of type file, and preview添加文件类型的动态输入字段，并预览
【发布时间】：2017-04-15 20:23:58
【问题描述】：

我做了一个动态的input of type file 来添加或删除一些图像。

当用户点击add fields 时，它会添加类型字段的新输入。单击按钮时附加输入字段的代码：

var i = 0;
    $("#add_more_img").click(function(e){
        i++;
        $("#dynamic_table_field").append('<tr id=row'+i+'><td><button name="remove" id="'+i+'" class="btn btn-danger btn-remove">X</button></td><td><input type="file" name="event_images[]" id="event_images'+i+'" data-panelid="event_images'+i+'" class="form-control images_list" accept="image/gif, image/png, image/jpeg, image/pjpeg" /></td><td id="img_preview_td"><img name="img_preview'+i+'" id="img_preview" /></td></tr>');
        alert("Hiiiiii");
        e.preventDefault();
    });

当用户选择图像时，我希望它显示在上图中的红色边框内。我已经有代码，但它只适用于单个输入字段。所以我试图对该代码进行一些更改，但仍然没有工作。这是代码：

$(".images_list").change(function() {
        var input = $(this);
        var name = $(this).attr("name");
        var id = $(this).attr("id");
        alert(input);
        var val = $(this).val();
        switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
            case 'gif': case 'jpg': case 'png': case 'jpeg':
                alert("an image");
                alert(name);
                readURL(this);
                break;
            default:
                $(this).val('');
                // error message here
                alert("not an image");
                break;
        }
    });
    function readURL(input) {
        var this_id = input.attr("id");
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                this_id.attr('src', e.target.result);
                this_id.css({
                    width:"120px",
                    height:"120px"
                });
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

我无法显示我选择的图像。

其他问题，当我提交表单时，它确实删除了我添加的所有输入字段。我怎样才能防止这种情况？

非常感谢您的帮助。

编辑：我添加了这个JSFiddle。

【问题讨论】：

如果你能准备一个 js fiddle 会更容易提供帮助。
@osmanraifgunes .. 我添加了 JSFiddle。

标签： javascript jquery html

【解决方案1】：

这是一个工作示例。我在我的机器上试了一下，现在可以工作了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Title Goes Here</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
        #div_create_event {
            margin: 17px 0;
        }

        #img_preview_td {
            outline: 1px solid red;
            width: 70px;
        }

        img {
            height: 200px;
            width: 200px;
        }
    </style>
    <script>
    $(document).ready(function(){
        var i = 0;
        $("#add_more_img").click(function(e){
            i++;
            $("#dynamic_table_field").append('<tr id=row'+i+'><td><button name="remove" id="'+i
            +'" class="btn btn-danger btn-remove">X</button></td><td><input type="file" onchange="myfn(this)" name="event_images[]" id="event_images'+i
            +'" data-panelid="event_images'+i+'" class="form-control images_list" accept="image/gif, image/png, image/jpeg, image/pjpeg" />'
            +'</td><td id="img_preview_td"><img id="img_preview'+i+'" /></td></tr>');
            e.preventDefault();
        });

        $(document).on("click",".btn-remove",function(){
             var button_id = $(this).attr("id");
             $("#row"+button_id+"").remove();
        });
    });

      function myfn(myinput) {
            var name = $(myinput).attr("name");
            var id = $(myinput).attr("id");
            var val = $(myinput).val();
            debugger;
            switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
                case 'gif': case 'jpg': case 'png': case 'jpeg':
                    readURL(myinput);
                    break;
                default:
                    $(this).val('');
                    break;
            }
        }


        function readURL(myinput) {
           debugger;
            if (myinput.files && myinput.files[0]) {
                  var reader = new FileReader();
                reader.onload = function (e) {
                    $('#img_preview' + $(myinput).attr("id").replace('event_images','') ).attr('src', e.target.result);
                }
                reader.readAsDataURL(myinput.files[0]);
            }
        }


    </script>
</head>

<body>
    <form action="" name="add_event" id="add_event" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="event_title">Title</label>
            <input type="text" class="form-control" name="event_title">
        </div>
        <table id="dynamic_table_field">
            <tr>
                <td><button name="add_more_img" id="add_more_img" class="btn btn-success">Add fields</button></td>
            </tr>
        </table>
        <div class="form-group" id="div_create_event">
            <input type="submit" class="btn btn-primary" id="create_event" name="create_event" value="Add Event">
        </div>
    </form>
</body>

</html>

表单现在不发布。

【讨论】：

感谢您的帮助，我的朋友。它工作得很好。最后一件事，当我单击submit 时，它会删除所有输入字段。我的问题是即使在点击submit 之后如何保持它（及其图片）显示？ 我尝试使用 e.preventDefault() 但这停止了 submit 工作。再次感谢！
Post 将所有这些数据发送到服务器。您应该将文件保存到服务器，然后在 get 方法中返回图像和输入字段 id、名称等。如需更多帮助，请提出另一个问题并提供您的代码。