Question

我找到了上传图片并将图片预览到表单的解决方案。

但是，选择清除按钮后，我很难删除图像的预览。

以下是将图像上传并预览到表单的脚本：

/*Upload email to form*/
        $(document).ready(function() {
            if (window.File && window.FileList && window.FileReader) {
                $("#files").on("change", function(e) {
                    var files = e.target.files,
                    filesLength = files.length;
                    for (var i = 0; i < filesLength; i++) {
                        var f = files[i]
                        var fileReader = new FileReader();
                        fileReader.onload = (function(e) {
                            var file = e.target;
                            $("<span class=\"pip\">" +
                            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
                            "<br/><span class=\"remove\">x</span>" +
                            "</span>").insertAfter("#files");
                            $(".remove").click(function(){
                                $(this).parent(".pip").remove();
                                $('#files').val("");
                            });
                        });
                        fileReader.readAsDataURL(f);
                    }
                });
            } 
            else {
                alert("Your browser doesn't support to File API")
            }
        });
/***********************/

以下是我重置表单的功能。我能够清除文件的名称，但不能清除表单中预览的图像。我想通过添加.find('#files').removeAtr('src');会删除预览，但它没有：

/*Clears the Form*/
        function resetForm() {
            $('form[name="email"] input:reset').click(function () {
                $('form[name="myform"]')
                    .find(':radio, :checkbox').removeAttr('checked').end()
                    .find('textarea, :text, select, file').val('')
                    .find('#files').removeAtr('src');

                return false;
            });
        }
/**********************/

以下是我上传和预览用户图片的表单的一部分。任何有关如何删除预览的建议都将非常感激。：

<form class="form-style-5" id="myform" name="email">
<fieldset>
    <legend><span class="number">3</span> Image Attachment</legend>
    <input type="file" id="files" name="files[]" multiple />
</fieldset>

    <input onclick="return checkForm(this.form)" type="submit" value="Submit" />
    <input type="reset" value="Clear" onclick="return resetForm(this.form);" />
</form>

Answer 1

此input已有重置表单的功能，因此点击resetForm()时无需致电input：

<input type="reset" value="Clear" onclick="return resetForm(this.form);" />

所以用这个代替：

<input type="reset" value="Clear" />

并将其添加到脚本中：

// Clears the image previews on resetting the form.
$( 'form[name="email"]' ).on( 'reset', function() {
    $( this ).find( '.pip' ).remove();
} );

您可以从页面中删除resetForm()，或者如果您想保留它，请使用此代替您现有的内容：

/*Clears the Form and the image previews.*/
        function resetForm(form) {
            $(form || 'form[name="email"]')
                .find(':radio, :checkbox').removeAttr('checked').end()
                .find('textarea, :text, select, :file').val('').end()
                .find('.pip').remove();

            return false;
        }
/**********************/

以下是使用resetForm()标准button（例如button type button）的示例：

<button onclick="return resetForm();">Reset</button>

选择清除按钮时删除图像预览

1 个答案: