如何通过单击"x"从文件输入中删除图像?在图像预览上? [英] How do I delete an image from a file input by clicking an "x" on an image preview?

问题描述

我目前有一个文件输入，一旦用户上传了他们的图像，它就会显示图像预览.在图像预览上，有一个"x"将从列表中删除图像预览.单击此"x"后，是否可以从输入的文件集中删除图像?

I currently have a file input that shows an image preview once the user uploads their images. On the image preview, there is an "x" that removes the image preview from the list. Is there any way to remove the image from the set of files in the input once this "x" is clicked?

<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>

已修复.请参阅下面的更新代码.

FIXED. See updated code below.

<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没有删除方法(可能出于安全原因).但是，您可以按照此处的建议清除整个文件列表:清除<输入type ='file'/>使用jQuery

You can't remove files one by one, as the API for FileList has no removing method (probably for security reasons). You can however clear the entire file list, as suggested here: Clearing <input type='file' /> using jQuery

这篇关于如何通过单击"x"从文件输入中删除图像?在图像预览上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！