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中运行良好。对于浏览器，您无法修复它。可以使用Javascript插件，例如DrpZone。

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

1 个答案: