Uploads labs range (with source code analysis) (under update)

pass-01

There is front-end validation

 

onsubmit: When submitting Forms Execute a paragraph when JavaScript. It only recognizes true perhaps false. If you don't return a value , The default is true

 

Write a picture of horse , The suffix is the picture suffix , then bp Just grab the bag and change it

 

Ant sword connection

 

Source code analysis

front end ：

 

checkile() function

function checkFile() {
    var file = document.getElementsByName('upload_file')[0].value;
    if (file == null || file == "") {
        alert(" Please select the file to upload !");
        return false;
    }
    // Define the types of files allowed to be uploaded 
    var allow_ext = ".jpg|.png|.gif";
    // Extract the type of uploaded file 
    var ext_name = file.substring(file.lastIndexOf("."));
    // Determine whether the type of uploaded file is allowed to be uploaded 
    if (allow_ext.indexOf(ext_name + "|") == -1) {
        var errMsg = " The file is not allowed to upload , Please upload " + allow_ext + " Files of type , The current file type is ：" + ext_name;
        alert(errMsg);
        return false;
    }
}

First, through getElementsByName Get form elements , It also gets an array of classes , If you want to get an element accurately , You can use array subscripts to get , So here document.getElementsByName('upload_file')[0].value; You get the file name .

Back if Statement to determine whether the uploaded file is empty

substring() Method is used to extract characters that are mediated between two specified subscripts .

example ：

var str="Hello world!";
document.write(str.substring(3)+"<br>");
document.write(str.substring(3,7));
---------------------------------------------------------------------
lo world!
lo w  

  
indexOf()  Method to return the first occurrence of a specified string value in the string . lastIndexOf()  Method to get the suffix   Returns the last position of the specified value in the string that calls the method , If not, return  -1. Look forward from the back of the string , from  fromIndex  Start at .  The characters in the string are indexed from left to right . Index of the first character （index） yes  0, The index of the last character is  stringName.length - 1.  Example ：

String name = "upload.doc";
//  Get suffix 
String sname = name.substring(name.lastIndexOf("."));
// get upload part 
String fileName=name.substring(0,name.lastIndexOf("."));

if (allow_ext.indexOf(ext_name + "|") == -1) , Find the suffix just extracted in the suffix that allows uploading , If you can't find it indexOf() Function will return -1, In this way, we can judge