在上传之前使用预览选择并删除多个图像

Question

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

我找到了一些非常好的插件，如fineUploader和dropzone，但是他们使用ajax提交。有了这些插件，我还没想出如何在没有ajax的情况下提交。

Answer 1

  

我正在寻找一个允许添加multiple images，previewing，删除和提交一些额外字段的插件   AJAX。

多张图片 ----＆gt; <input type='file' id="myfiles" multiple="multiple" name="files[]">

预览 ---＆gt; Jquery的

<强>除去 -----＆GT;极不可能从文件列表中逐个删除图像，因为api是只读的，但是当点击删除按钮时我们可以清除整个文件列表。

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

我认为除了使用上面提到的其中一个插件之外，还有一种方法可以达到你所需要的效果。

您目前可以想到两个选项。

1. 在文件输入类型上使用multiple属性，然后你可以使用jquery来预览已加载的图像，但是我们无法从filelist逐个删除图像我们只能删除预览中的图像，但服务器端仍然会处理图像，或者我们可以清除整个文件列表，如上所述。

或

1. 我们可以使用jquery动态添加file字段，这样我们就可以添加一个图像添加一个时间，然后添加更多图像按钮，它会附加一个新的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>

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

古德勒克。

Answer 2

您可以使用DropzoneJS

他们有一个可配置选项列表，您可以在此处找到。 Dropzone JS Usage.

如果您仍需要更多自定义，则必须向其添加自己的代码。希望这可以帮助您编写数千行代码。

没有AJAX请求：

这可能会对你有所帮助。 Click here!