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