在上传之前，根据文件的扩展名在预览中显示不同的图像

Question

我正在创建一个包含文件上传的表单。 用户可以上传图像或其他文件，例如docx，txt，pdf等。如果用户浏览并选择了图像，则它会显示其缩略图。 问题是，如果用户选择要上传的pdf或doc文件，我想基于文件的扩展名显示默认图像。 例如。 如果是pdf文件，则为image1，对于docx，应显示image2。

我正在使用此代码。

<img id="blah" alt="your image" width="80" height="80" />
<input id="file" type="file" name='file' onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])" />

这是文件字段和预览的图像。 选择图像时

PS：图像效果很好。 我想知道如何显示其他扩展的预览。 希望我能说清楚。

Answer 1

也许这段代码有帮助

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        //insert an image with the use of the "ext" variable
    }
}