Avatar Upload method One: From Form method two: Ajax

Method one: From form

Html

Set Form form with Avatar Preview div containing upload file input

Setting an IFRAME to invoke a function-pass path

        <!--when the form is submitted successfully, it does not jump to the page, but returns the processing data to the IFRAME framework, using the target property, which is the frame's name -        <formID= "Form1"Action= "chuli.php"Method= "POST"enctype= "Multipart/form-data"Target= "SC">            <!--Avatar Display Location -            <DivID= "Show">                <!--Delete the Submit button, set to execute the form submission when the path changes, script statements can be written directly after the function -                <!--file upload is transparent and fills the entire div, making it possible to browse pictures when you click the Avatar frame -                <inputtype= "File"ID= "File"name= "File"onchange= "$ (' #form1 '). Submit ();"/>            </Div>        </form>                <!--Frame -        <iframeID= "SC"name= "SC"></iframe>

Js

    function showImage (path) {        $ (' #show '). CSS (' background-image ', ' url (' +path+ ') ');    }     // call function after onchange //     function aa () {//        $ (' #form1 '). Submit (); //     }

Php

    //file name    $name=$_files[' File '] [' Name ']; //File Type    $type=$_files[' File '] [' Type ']; //Temporary Path    $tmp _name=$_files[' File '] [' Tmp_name ']; //Error code    $error=$_files[' File '] [' Error ']; //File Size    $size=$_files[' File '] [' Size ']; //If the file name is not empty, judge down    if(!Empty($name)){        //if the error equals 0 There is no error, go down and Judge        if($error= = 0){            //when the file type is picture            if($type= = ' Image/png '){                //file size less than 100000b                if($size<=100000){                    //If the folder does not exist Upfile                    if(!Is_dir("./image/")){                        //Create a folder Upfile                        mkdir("./image/"); }                    //Defining Timestamps                    $time= Time(); //the file path is set to                    $path= "./image/".$time.$name; //If the file moves successfully                    if(Move_uploaded_file($tmp _name,$path)){                        //the data returned to the page//Because the IFRAME is a child of the page, so. Parent is the page,. ShowImage is the function, $path is the path to the parameter                        Echo"<script>window.parent.showimage (' {$path} ') </script> "; }Else{                        Echo' Upload failed '; }                //Otherwise, the output file is too large}Else{                    Echo' File too large '; }            //output format is not correct if not picture}Else{                Echo' File format is incorrect '; }        //error code, output all kinds of wrong meaning. }Else{            Switch($error){                 Case' 1 ':Echo' The uploaded file exceeded the value of the Upload_max_filesize option limit in php.ini ';  Break;  Case' 2 ':Echo' The file size exceeds the value specified by the Max_file_size option in the HTML form. ‘;  Break;  Case' 3 ':Echo' files are only partially uploaded ';  Break;  Case' 4 ':Echo' No files were uploaded ';  Break; }        }    //file name is empty, the output file is empty}Else{        Echo' File is empty '; }

Method Two: Ajax

Html

        <!--avatar Frame, set width height, background map, background size 100% -        <DivID= "showing">            <!--upload file, set width 100%, transparent -            <inputtype= "File"ID= "File"name= "File"onchange= "Upload ()" />        </Div>        <!--<input type= "button" value= "Upload" onclick= "upload ()"/> -

Js

    functionupload () {//get the file name        varPath = $ (' #file '). Val (); //If a newline space in the file name is blank, you are prompted to select the file        if($.trim (path) = = "") {alert (' Please select a file to select '); return; } $.ajaxfileupload ({URL:' Chuli.php ', type:' Post ', Secureuri:false,//whether to enable secure commit, default falseFileelementid: ' File ',//Id,name Property Name of the uploaded fileDataType: ' Text ', data:{}, Success:function(data) {//console.log (data);$ (' #showing '). CSS (' background-image ', ' url (' +data+ ') ');    }        }); }

PHP is the same as above, except that the return value is only the file path.

    $name=$_files[' File '] [' Name ']; $type=$_files[' File '] [' Type ']; $tmp _name=$_files[' File '] [' Tmp_name ']; $error=$_files[' File '] [' Error ']; $size=$_files[' File '] [' Size ']; if(!Empty($name)){        if($error= = 0){            if($type= = ' Image/png '){                if($size<=100000){                    if(!Is_dir("./image/")){                        mkdir("./image/"); }                    $time= Time(); $path= "./image/".$time.$name; if(Move_uploaded_file($tmp _name,$path)){                        Echo $path; }Else{                        Echo' Upload failed '; }                }            }        }    }

The trim () function removes white space characters or other predefined characters on either side of the string.

• "+"-NULL
• "\ T"-tab
• "\ n"-line break
• "\X0B"-Vertical tab
• "\ r"-Enter
• ""-Space

Avatar Upload method One: From Form method two: Ajax