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

Question

I am creating a form which includes file uploading. The user can upload image or other file like docx, txt, pdf etc. If a user browse and selects an image then it shows its thumbnail. The problem is that if a user selects a pdf or doc file to upload, I want to display a default image based on the extension of file. For eg. if its a pdf file then image1, for docx it should display image2.

I am using this code.

<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])" />

Here is the image of the file field and preview. When image is selected

PS: It is working fine with images. I want to know how to display preview for other extensions. Hope I am making myself clear.

Answer 1

Maybe this code helps

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