上传前通过预览选择并删除多个图像

Question

我正在寻找一个插件，它允许添加多个图像，预览，删除和提交一些额外的字段，而不需要ajax。

我发现了一些非常好的插件，如fineUploader 和dropzone，但它们使用ajax 提交。有了这些插件，我还没弄清楚如何在没有ajax的情况下提交。

Answer 1

我正在寻找一个插件，它允许添加multiple images、previewing删除和提交一些额外的字段，而无需使用ajax。

多个图像----><input type='file' id="myfiles" multiple="multiple" name="files[]">

预览---> Jquery

删除-----> 几乎不可能从文件列表中一张一张地删除图像，因为 api 是只读的，但是当单击删除按钮时，我们可以清除整个文件列表。

没有ajax ----> 只需将表单操作到控制器/处理程序。

我认为除了使用上面提到的插件之一之外，没有其他方法可以实现您所需要的。

我目前能想到的有两个选择。

1. 在文件输入类型上使用 multiple 属性，那么您可以使用 jquery 预览加载的图像，但是我们无法将图像从预览中一一删除，我们filelist只能从预览中删除图像，但服务器一边仍然会处理图像，或者我们可以清除整个文件列表，正如我上面提到的。

或者

1. 我们可以file使用 jquery 动态添加字段，这样我们就可以添加一个图像，添加一个时间，然后有一个添加更多图像按钮，它将file向我们的表单追加一个新输入，这样我们就可以删除图像在服务器端处理之前一一进行。

选项1

 $('document').ready(function() {
        var images = function(input, imgPreview) {
    
            if (input.files) {
                var filesAmount = input.files.length;
    
                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();
    
                    reader.onload = function(event) {
                        $($.parseHTML("<img class='pic'>")).attr('src', event.target.result).appendTo(imgPreview);
                    }
                    reader.readAsDataURL(input.files[i]);
                }
            }
    
        };
    
        $('#myimg').on('change', function() {
            images(this, '#previews');
        });
            
            //clear the file list when image is clicked
        $('body').on('click','img',function(){
            $('#myimg').val("");
            $('#previews').html("");
    
        });
    });

 img{
    cursor: pointer;
    }

<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

<form id="form1"  enctype="multipart/form-data" action="server.php" method="post">
    <input type='file' id="myimg" multiple="multiple">
    <div id="previews"></div>
        <p>&nbsp;</p>
    <button type="submit">Submit</button>
</form>

选项2

var abc = 0;
        $('#add_more').click(function ()
            {
                $(this).before($("<div/>",{id: 'filediv'}).fadeIn('slow').append($("<input/>",
                            {
                                name: 'file[]',
                                type: 'file',
                                id: 'file'
                            }),
                            $("<br/><br/>")
                        ));
            });
        $('body').on('change', '#file', function ()
            {
                if (this.files && this.files[0])
                {
                    abc += 1; //increementing global variable by 1
                    var z = abc - 1;
                    var x = $(this)
                        .parent()
                        .find('#previewimg' + z).remove();
                    $(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                    $(this)
                        .hide();
                    $("#abcd" + abc).append($("<img/>",{
                                id: 'img',
                                src: 'x.png', //the remove icon
                                alt: 'delete'
                            }) .click(function ()
                            {
                                $(this)
                                    .parent()
                                    .parent()
                                    .remove();
                            }));
                }
            });
        //image preview
        function imageIsLoaded(e)
        {
            $('#previewimg' + abc)
                .attr('src', e.target.result);
        };

<script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<form method="POST" action="server.php" enctype="multipart/form-data">
    <div class="col-md-3 col-sm-3 col-xs-3">
            <div id="filediv"><input name="file[]" type="file" id="file"/></div>
    <input type="button" id="add_more" class="btn btn-primary" value="Add More Files"/><br><br>
    
    <button type="submit" class="btn btn-success">Submit</button>
</form>

我相信这个 more esp 选项 2 可以做到这一点，选择图像，添加更多预览删除，然后当你高兴时点击提交按钮，然后在服务器上进行处理。您可以向预览图像添加样式

祝你好运。