如何通过单击图像预览上的“x”从文件输入中删除图像？

Question

我目前有一个文件输入，用户在上传图像后会显示图像预览。在图像预览中，有一个“x”，用于从列表中删除图像预览。单击“x”后，有没有办法从输入中的文件集中删除图像？

<label for="my_file_upload[]">
                    <span class="btn">Add Images</span>
                </label> 
                <input style="visibility: hidden; position: absolute;" class="imagefet" type="file" name="upload_attachment[]" id="my_file_upload[]" multiple="multiple">

                <br><output id="list"></output>

                <script type="text/javascript">
                    jQuery(function($){

                    var count=0;
                    function handleFileSelect(evt) {
                        var $fileUpload = $(".imagefet");
                        count=count+parseInt($fileUpload.get(0).files.length);

                        if (parseInt($fileUpload.get(0).files.length) > 5 || count>4) {
                            alert("You can only upload a maximum of 4 files");
                            count=count-parseInt($fileUpload.get(0).files.length);
                            evt.preventDefault();
                            evt.stopPropagation();
                            return false;
                        }
                        var files = evt.target.files;
                        for (var i = 0, f; f = files[i]; i++) {
                            if (!f.type.match('image.*')) {
                                continue;
                            }
                            var reader = new FileReader();

                            reader.onload = (function (theFile) {
                                return function (e) {
                                    var span = document.createElement('span');
                                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                                    document.getElementById('list').insertBefore(span, null);
                                };
                            })(f);

                            reader.readAsDataURL(f);
                        }
                    }

                    $('.imagefet').change(function(evt){
                        handleFileSelect(evt);
                    });  

                    $('#list').on('click', '.remove_img_preview',function () {
                        $(this).parent('span').remove();

                        var i = array.indexOf($(this));
                        if(i != -1) {
                            array.splice(i, 1);
                        }

                        count--;
                    });

                    })
                </script>

固定。请参阅下面的更新代码。

<script type="text/javascript">
                    jQuery(function($){
                        $("#clear").click(function(event){
                          event.preventDefault();
                          $("#control").replaceWith('<input style="visibility: hidden; position: absolute;" class="imagefet" type="file" name="upload_attachment[]" id="control" multiple="multiple">');
                          $("div.output-fet").replaceWith('<output id="list"></output>');
                        });
                    })
                </script>

                <!-- File Upload Section BEGIN -->
                <label for="control">
                    <span class="btn">Add Images</span>
                </label> 
                <input style="visibility: hidden; position: absolute;" class="imagefet" type="file" name="upload_attachment[]" id="control" multiple="multiple">

                <br><div class="output-fet"><output id="list"></output></div>

                <a href="#" id="clear">Clear</a>

                <script type="text/javascript">
                    jQuery(function($){

                    var count=0;
                    function handleFileSelect(evt) {
                        var $fileUpload = $(".imagefet");
                        count=count+parseInt($fileUpload.get(0).files.length);

                        if (parseInt($fileUpload.get(0).files.length) > 5 || count>4) {
                            alert("You can only upload a maximum of 4 files");
                            count=count-parseInt($fileUpload.get(0).files.length);
                            evt.preventDefault();
                            evt.stopPropagation();
                            return false;
                        }
                        var files = evt.target.files;
                        for (var i = 0, f; f = files[i]; i++) {
                            if (!f.type.match('image.*')) {
                                continue;
                            }
                            var reader = new FileReader();

                            reader.onload = (function (theFile) {
                                return function (e) {
                                    var span = document.createElement('span');
                                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                                    document.getElementById('list').insertBefore(span, null);
                                };
                            })(f);

                            reader.readAsDataURL(f);
                        }
                    }

                    $('.imagefet').change(function(evt){
                        handleFileSelect(evt);
                    });  


                    /*    

                    $('#list').on('click', '.remove_img_preview',function () {
                        $(this).parent('span').remove();

                        var i = array.indexOf($(this));
                        if(i != -1) {
                            array.splice(i, 1);
                        }

                        count--;
                    }); */

                    })
                </script>

Answer 1

您无法逐个删除文件，因为FileList的API没有删除方法（可能出于安全原因）。但是，您可以按照此处的建议清除整个文件列表：Clearing <input type='file' /> using jQuery