Animated PNG images (APNG) have been around for quite a while in an attempt to add this functionality of the GIF format to PNG images. According to Wikipedia they are supported in Opera (>= 9.5) and in Firefox (>= 3.0). The first frame in the APNG animation is displayed if a browser doesn't support APNG images, since it was defined as an extension of the widely supported PNG format. Suppose you have an animated PNG that you want to show in your site and you want to warn your users if their browsers doesn't support it. How would you do it?
Html – Avoiding browser incompatibilities when using animated PNG images
-background white -alpha remove -alpha off
convert image.png -background white -alpha remove -alpha off white.png
Feel free to replace
white with any other color you want. Imagemagick documentation says this about the
-alpha remove operation:
This operation is simple and fast, and does the job without needing any extra memory use, or other side effects that may be associated with alternative transparency removal techniques. It is thus the preferred way of removing image transparency.
Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension.
But still, the accept attribute of
<input type = "file"> can help to provide a filter in the file select dialog box of the OS. For example,
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> <input type="file" accept=".xls,.xlsx" />
should provide a way to filter out files other than .xls or .xlsx. Although the MDN page for
input element always said that it supports this, to my surprise, this didn't work for me in Firefox until version 42. This works in IE 10+, Edge, and Chrome.
So, for supporting Firefox older than 42 along with IE 10+, Edge, Chrome, and Opera, I guess it's better to use comma-separated list of MIME-types:
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) --> <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
[Edge (EdgeHTML) behavior: The file type filter dropdown shows the file types mentioned here, but is not the default in the dropdown. The default filter is
All files (*).]
You can also use asterisks in MIME-types. For example:
<input type="file" accept="image/*" /> <!-- all image types --> <input type="file" accept="audio/*" /> <!-- all audio types --> <input type="file" accept="video/*" /> <!-- all video types -->
W3C recommends authors to specify both MIME-types and corresponding extensions in the
accept attribute. So, the best approach is:
<!-- Right approach: Use both file extensions and corresponding MIME-types. --> <!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) --> <input type="file" accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
JSFiddle of the same: here.
Reference: List of MIME-types
IMPORTANT: Using the
Here are three good reads on file-uploads and security.
Make the first image display for a very short period of time, and have it be a big, ugly error message.