Research on the Input Button Function of Type File

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

Recommend

jQuery implements the mouse drag image function

This example uses jQuery to implement a mouse dra...

How to implement an array lazy evaluation library in JavaScript

Table of contents Overview How to achieve it Spec...

Vue3 (Part 2) Integrating Ant Design Vue

Table of contents 1. Integrate Ant Design Vue 2. ...

Forty-nine JavaScript tips and tricks

Table of contents 1. Operation of js integer 2. R...

The docker-maven-plugin plugin cannot pull the corresponding jar package

When using the docker-maven-plugin plug-in, Maven...

HTML table markup tutorial (16): title horizontal alignment attribute ALIGN

By default, the table title is horizontally cente...

CSS to achieve Skeleton Screen effect

When loading network data, in order to improve th...

Complete MySQL Learning Notes

Table of contents MyISAM and InnoDB Reasons for p...

Complete steps for deploying jar package projects using Shell scripts in Linux

1. Install JDK Check the computer's operating...

CSS implements horizontal scrolling navigation bar on mobile devices (also applicable to PC devices)

Function Origin I was recently working on an H5 t...

Pure CSS to achieve the effect of picture blinds display example

First, let me show you the finished effect Main i...

MySQL uses SQL statements to modify table names

In MySQL, you can use the SQL statement rename ta...

MySQL 8.0.11 Installation Guide for Mac

MAC installs mysql8.0, the specific contents are ...

Docker configuration Alibaba Cloud Container Service operation

Configuring Alibaba Cloud Docker Container Servic...

Build a WebRTC video chat in 5 minutes

In the previous article, I introduced the detaile...