Research on the Input Button Function of Type File

<br />When uploading on some websites, a [Select File] dialog box will pop up after clicking the "Browse" button. Many times we need to upload only image files, then in the pop-up [Select File] dialog box only files of related image formats are displayed, and all other formats of files are filtered out and not displayed.
For example, http://www.youku.com/v1.0.0326/v/swf/up.swf
This is Youku's video upload option, which uses the FLASH method to prevent non-video files from being displayed.
FLASH to this effect is generally as described here
import flash.net.FileReferenceList;
var fileRef:FileReferenceList = new FileReferenceList();
var allTypes:Array = [];
var browse type:Object = new Object();
Browsing type.description = "Browsing type (*.mp3)";
Browse type.extension = "*.mp3";
allTypes.push(browse type);
fileRef.browse(allTypes);
So for the <input type="File"> in our web page, can we also implement a pop-up window to limit the file type?
The current solution is to remind users that the format of the uploaded file is incorrect through monitoring.
<script>
function check(){
var filepath=path.value
filepath=filepath.substring(filepath.lastIndexOf('.') 1,filepath.length)
if(filepath != 'jpg' && filepath != 'gif')
alert("Only JPG or GIF format images can be uploaded")
}
</script>
<input type=file name=path onpropertychange="check()"> (Only JPG or GIF format images can be uploaded)
<script>
function ck(obj){if(obj.value.length>0){
var af="jpg,gif,png,zip,rar,txt,htm";
if(eval("with(obj.value)if(!/" af.split(",").join("|") "/ig.test(substring(lastIndexOf('.') 1,length)))1;")){alert("Allowed file types:\n" af);obj.createTextRange().execCommand('delete')};
}}
</script>
<form>
<input type=file name=path onpropertychange="ck(this)"/></form>
However, this effect is obviously not as good as the user experience of FLASH. It is necessary to pay attention to this type of FLASH upload.

<<: Detailed explanation of DOM style setting in four react components

>>: MYSQL string forced conversion method example

Detailed description of ffmpeg Chinese parameters

Research on the Input Button Function of Type File

Detailed description of ffmpeg Chinese parameters

Detailed steps for remote deployment of MySQL database on Linux

Vant+postcss-pxtorem implements browser adaptation function

Float and Clear Float in Overview Page

Solution to mysql error code 1064

Solution to the failure of MySQL to use innobackupex to backup the connection server

How to modify the length limit of group_concat in Mysql

Navicat connects to MySQL8.0.11 and an error 2059 occurs

JavaScript implements the protocol example in which the user must check the box

Example of converting JS one-dimensional array into three-dimensional array

Recommend

Summary of common commands in Dockerfile

JavaScript recursion detailed

Summary of new usage of vi (vim) under Linux

Detailed explanation of the installation and use of Linux scheduled tasks crontabs

Detailed steps for installing JDK and Tomcat on Linux cloud server (recommended)

Solve the problem of failure to mount files or directories using ./ relative path in docker run

Notes on configuring multiple proxies using vue projects

Linux automatically deletes logs and example commands from n days ago

Detailed explanation of the process of realizing calculator function in javascript

10 kinds of loading animations implemented with CSS3, pick one and go?

How to install and configure Redis in CentOS7

Example explanation of MySQL foreign key constraints

Example of how to change the line spacing of HTML table

Using zabbix to monitor the ogg process (Linux platform)

Detailed explanation of primary keys and transactions in MySQL