如何处理输入类型文件的取消事件？

Question

我正在尝试显示所选图像的预览。一切正常，除了当我选择文件时，我可以看到所选文件的数量以及所选文件的预览，但是当我第二次单击选择文件按钮并且如果我没有选择任何文件单击取消然后在这种情况下这将删除我不想要的选定文件（即，而不是选定文件计数，我没有看到选择的文件因为文件被删除）。因此，如果用户单击取消，则意味着他只想要以前的选择。

这是我的代码。

<a>
    <input type="file" name="data[animal][animal_photographs][]" 
            onchange="PreviewImages('stray');" multiple="multiple"
            id="preview_images_stray" accept="image/*">
</a>

Js：

function PreviewImages(type) 
{
    if(document.getElementById("append_preview_div"))
    {
        while (document.getElementById("append_preview_div")) {
            document.getElementById("append_preview_div").remove();
        }
    }

    // get all choosen images
    var files = document.getElementById("preview_images_"+type).files;

    if (files.length > 5) 
    {
        alert("You can upload maximum 5 images.");
        document.getElementById("preview_images_"+type).value = null;

        if(document.getElementById("append_preview_div"))
        {
            while (document.getElementById("append_preview_div")) {
                document.getElementById("append_preview_div").remove();
            }
        }
        return false;
    }

    for(var i = 0; i < files.length; i++)
    {
        var fileReader = new FileReader();
        fileReader.readAsDataURL(document
                    .getElementById("preview_images_"+type)
                    .files[i]);

        fileReader.onload = function (fileReadEvent) 
        {
            var newDiv = document.createElement("DIV");
            newDiv.setAttribute("class", 'col-md-2');
            newDiv.setAttribute("id", 'append_preview_div');

            var newImage = document.createElement("IMG");
            newImage.setAttribute("id", "preview-img-"+type);
            newImage.setAttribute("src", fileReadEvent.target.result);

            newDiv.appendChild(newImage);

            document.getElementById('append_preview_images_'+type).appendChild(newDiv);
            document.getElementById('append_preview_images_'+type).style.display = 'block';
        };
    }
};

Answer 1

它只发生在 Chrome 上，并且在 Firefox 中运行良好。是你无法修复的浏览器。你可以使用DrpZone之类的javascript插件。