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

Web Design: Script Materials Reconstruct User Experience

Research on the Input Button Function of Type File

Web Design: Script Materials Reconstruct User Experience

Today I will share some rare but useful JS techniques

Mysql splits string into array through stored procedure

Analysis of the locking mechanism of MySQL database

How to change the root password of Mysql5.7.10 on MAC

How to add fields to a large data table in MySQL

How to use Linux to calculate the disk space occupied by timed files

UrlRewriter caching issues and a series of related explorations

How to use video.js in vue to play m3u8 format videos

Summary of seven sorting algorithms implemented in JavaScript (recommended!)

Recommend

Detailed steps for creating a Vue scaffolding project

Notes on using the blockquote tag

Nodejs error handling process record

How to deploy tomcat in batches with ansible

How to redirect PC address to mobile address in Vue

JavaScript simulation calculator

Example of implementing dynamic verification code on a page using JavaScript

Detailed explanation of 7 SSH command usages in Linux that you don’t know

There is no problem with the Linux file path when deploying the window and Linux projects

Detailed explanation of HTML programming tags and document structure

MySQL not null constraint case explanation

MySQL community server 8.0.16 installation and configuration method graphic tutorial under Windows

Analysis of the process of configuring a simple network environment based on Tcl language

How to implement Docker Registry to build a private image warehouse

How to create your first React page