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.
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
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.