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

我目前有一个文件输入，一旦用户上传图像，就会显示图像预览。在图像预览上，有一个“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>

您无法一一删除文件，因为 FileList 的 API 没有删除方法（可能是出于安全原因）。但是，您可以清除整个文件列表，如下所示：使用 jQuery 清除 https://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery/13351234#13351234