Input upload file of form form

In this small project, I used the file upload. Before I knew about the form, I just sent the user name and password. Okay, since it's used, just bite the bullet.

use

First, the upload of the file requires an input of type=file. Its meaning is to upload files, pictures, audios, and videos with it. Specifically how it is used:

First of all, it must be put in this input first:
input
I just wrote this, and nothing else is added. At this time, when I run it, I see that there is already this on the page:
input
this button comes with this attribute, click to upload what you need File, the following text will become the file information you uploaded after uploading, this is simple to use.

Input limit upload files

When you want to upload files, sometimes you need to limit the types of files you upload. There is also an accept attribute in the input of type=file, which can be used to restrict the uploading of files. Just follow the attribute and the type to be uploaded. As shown in the figure
Insert picture description here
, the format of these files can be found on the mime table. When you find what you need, just write it up
mime table

This restriction method is restricted at the root cause, clicking upload will not display files outside the restriction.

In addition to this method, using js to verify the suffix of the uploaded file is also a common method. The value in the input of type=file is the information of the uploaded file, which can be verified through regular rules. Below is my function to verify the specified video file, you can refer to it:

//将需要验证的视频后缀名封装为一个数组,方便调用
var video_ext=['rmvb','3gp','avi','mp4','wmv','mov','flx'];
//封装一个验证视频课时的函数
function check_video(value) {
    
    
    let video_flag=false;
    let index=value.lastIndexOf('.');
    //取.后面的字符,与数组中的一一比较
    let ext=value.substr(index+1);
    for(let i=0;i<video_ext.length;i++){
    
    
        if(ext == video_ext[i])
        {
    
    
            video_flag = true; //一旦找到合适的,立即退出循环
            break;
        }
    }
    if(video_flag)
    {
    
    
       return true;
    }else
    {
    
    
        return false;
    }
}

Guess you like

Origin blog.csdn.net/qq_50646256/article/details/110653636