在上傳之前，根據文件的擴展名在預覽中顯示不同的圖像

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