Php+js IFRAME implementation upload Avatar interface without jump _php skills

Source: Internet
Author: User
Tags file upload imagejpeg
Upload Avatar, the interface does not jump a lot of ways, I used to add an iframe kind. Directly below the code.

Html:
Copy Code code as follows:

Route for back-end interfaces
Upload/avatar for the uploaded avatar's save address
imgurl=/upload/avatar/<?= $uid?> Here the last <?= $uid?> is for the back with JS to achieve real-time display of the latest replacement of the head with the reference to the following JS part of the code
Avatar save name is Uid.type, such as 1.jpg,2.png
$user [' Avatar '] if the user uploads the Avatar, the Avatar field in the user's database will be given a timestamp, otherwise null
<form target= "iframe" enctype= "Multipart/form-data" action= "route?imgurl=/upload/avatar/<?= $uid?>" method = "POST" id= "Upload_form" >
"style=" width:100px; height:100px; "/>
<input type= "File" name= "file" size= "/>"
<input type= "Submit" Name= "Submit_file" value= "to determine" style= "display:none;" />
</form>
<iframe id= "iframe" name= "iframe" style= "Display:none;" ></iframe>

Php:
Copy Code code as follows:

$token = param (' token ');
$user = User_from_token ($token);
! $user and exit ("<p class= ' iframe_message ' status= ' 0 ' > $lang [user_not_exists]</p>");
File storage Path
$file _path= "./upload/avatar/";
664 permissions are readable and writable by the file owner and group user, and are read-only by other users.
if (Is_dir ($file _path)!= TRUE) mkdir ($file _path, 0664);
Define file extensions to allow uploads
$ext _arr = Array ("GIF", "JPG", "JPEG", "PNG", "BMP");

if (empty ($_files) = = False) {
Judgment check
$photo _up_size > 2097152 and Exit ("<p class= ' iframe_message ' status= ' 0 ' > Sorry, you uploaded photos over 2m</p>");
$_files["File" ["error"] > 0 and exit ("<p class= ' iframe_message ' status= ' 0 ' > File Upload error:". $_files["File"] [" Error "]." </p> ");
Get file name extension
$temp _arr = Explode (".", $_files["file"] ["name"]);
$file _ext = Array_pop ($temp _arr);
$file _ext = Trim ($file _ext);
$file _ext = strtolower ($file _ext);
Check extension
if (In_array ($file _ext, $ext _arr) = = False) {
Exit ("<p class= ' iframe_message ' status= ' 0 ' > upload file name extension is not allowed extension </p>");
}
Delete files with the same prefix in the directory
if ($dh = Opendir ($file _path)) {
while (($file = Readdir ($DH))!== false) {
$file _arr = $file. Split ('. ');
if ($file _arr[0] = = $user [' uid ']) unlink ($file _path. $file);
}
}
Rename a file with the UID
$new _name = $user [' uid ']. "." $file _ext;
Move a file to a storage directory
Move_uploaded_file ($_files["file"] ["Tmp_name"], $file _path. $new _name);
Cropping compressed pictures
Clip ($file _path. $new _name, $file _path. $new _name, 0, 0, 100, 100);
Clip_thumb ($file _path. $new _name, $file _path. $new _name, 100, 100);
Write file storage information to a datasheet to manage
User_update ($user [' uid '], array (' Avatar ' =>time ()));
Exit ("<p class= ' iframe_message ' status= ' 1 ' > File uploaded successfully </p>");
} else {
Exit ("<p class= ' iframe_message ' status= ' 0 ' > No correct file upload </p>");
}

<?php

function ext ($filename) {
Return Strtolower (substr strrchr ($filename, '. '), 1);
}

/*
Instance:
Thumb (App_path ' xxx.jpg ', App_path. ' Xxx_thumb.jpg ', 200, 200);

Return:
Array (' FileSize ' =>0, ' width ' =>0, ' height ' =>0)
*/
function Thumb ($sourcefile, $destfile, $forcedwidth =, $forcedheight = 80) {
$return = Array (' filesize ' =>0, ' width ' =>0, ' height ' =>0);
$imgcomp = 10;
$destext = ext ($destfile);
if (!in_array ($destext, Array (' gif ', ' jpg ', ' bmp ', ' png ')) {
return $return;
}

$imgcomp = 100-$imgcomp;
$imginfo = getimagesize ($sourcefile);
$SRC _width = $imginfo [0];
$SRC _height = $imginfo [1];
if ($src _width = = 0 | | $src _height = = 0) {
return $return;
}
$src _scale = $src _width/$src _height;
$des _scale = $forcedwidth/$forcedheight;

if (!function_exists (' imagecreatefromjpeg ')) {
Copy ($sourcefile, $destfile);
$return = Array (' FileSize ' =>filesize ($destfile), ' width ' => $src _width, ' height ' => $src _height);
return $return;
}

By the specified ratio of abbreviations
if ($src _width <= $forcedwidth && $src _height <= $forcedheight) {
$des _width = $src _width;
$des _height = $src _height;
} elseif ($src _scale >= $des _scale) {
$des _width = ($src _width >= $forcedwidth)? $forcedwidth: $src _width;
$des _height = $des _width/$src _scale;
$des _height = ($des _height >= $forcedheight)? $forcedheight: $des _height;
} else {
$des _height = ($src _height >= $forcedheight)? $forcedheight: $src _height;
$des _width = $des _height * $SRC _scale;
$des _width = ($des _width >= $forcedwidth)? $forcedwidth: $des _width;
}

Switch ($imginfo [' MIME ']) {
Case ' Image/jpeg ':
$img _src = Imagecreatefromjpeg ($sourcefile);
$img _src && $img _src = imagecreatefromgif ($sourcefile);
Break
Case ' image/gif ':
$img _src = imagecreatefromgif ($sourcefile);
$img _src && $img _src = Imagecreatefromjpeg ($sourcefile);
Break
Case ' image/png ':
$img _src = imagecreatefrompng ($sourcefile);
Break
Case ' image/wbmp ':
$img _src = imagecreatefromwbmp ($sourcefile);
Break
Default:
return $return;
}

$img _DST = Imagecreatetruecolor ($des _width, $des _height);
$img _color = imagecolorallocate ($img _dst, 255, 255, 255);
Imagefill ($img _dst, 0, 0, $img _color);
Imagecopyresampled ($img _dst, $img _src, 0, 0, 0, 0, $des _width, $des _height, $src _width, $src _height);
$tmpfile = $temp _path.md5 ($destfile);
$tmpfile = $destfile;
Switch ($destext) {
Case ' jpg ': imagejpeg ($img _dst, $tmpfile, $imgcomp); Break
Case ' gif ': imagegif ($img _dst, $tmpfile, $imgcomp); Break
Case ' png ': imagepng ($img _dst, $tmpfile, Version_compare (php_version, ' 5.1.2 ') = = 1 7:70); Break
}
$r = Array (' FileSize ' =>filesize ($tmpfile), ' width ' => $des _width, ' height ' => $des _height);;
Copy ($tmpfile, $destfile);
Unlink ($tmpfile);
Imagedestroy ($img _dst);
return $r;
}
/*
* Picture Cutting
*
* @param string $srcname The original picture path (absolute path/*.jpg)
* @param string $forcedheight after trimming to generate a new name (absolute path/rename.jpg)
* @param int $sourcefile The x-coordinate of the cropped picture
* @param int $destfile The y-coordinate of the trimmed picture
* @param int $destext width of the trimmed area
* @param int $imgcomp height of the trimmed area
Clip (' xxx/x.jpg ', ' xxx/newx.jpg ', 10, 40, 150, 150)
*/
function clip ($sourcefile, $destfile, $clipx, $clipy, $clipwidth, $clipheight) {
$getimgsize = getimagesize ($sourcefile);
if (empty ($getimgsize)) {
return 0;
} else {
$imgwidth = $getimgsize [0];
$imgheight = $getimgsize [1];
if ($imgwidth = = 0 | | $imgheight = = 0) {
return 0;
}
}

if (!function_exists (' imagecreatefromjpeg ')) {
Copy ($sourcefile, $destfile);
return FileSize ($destfile);
}
Switch ($getimgsize [2]) {
Case 1:
$imgcolor = Imagecreatefromgif ($sourcefile);
Break
Case 2:
$imgcolor = Imagecreatefromjpeg ($sourcefile);
Break
Case 3:
$imgcolor = Imagecreatefrompng ($sourcefile);
Break
}
$imgcolor = Imagecreatefromjpeg ($sourcefile);
$img _DST = Imagecreatetruecolor ($clipwidth, $clipheight);
$img _color = imagecolorallocate ($img _dst, 255, 255, 255);
Imagefill ($img _dst, 0, 0, $img _color);
Imagecopyresampled ($img _dst, $imgcolor, 0, 0, $clipx, $clipy, $imgwidth, $imgheight, $imgwidth, $imgheight);
$tmpfile = $destfile;
Imagejpeg ($img _dst, $tmpfile, 100);
$n = FileSize ($tmpfile);
Copy ($tmpfile, $destfile);
return $n;
}

First cut after the abbreviation, as determined, width, height, do not need to return to wide height.
function Clip_thumb ($sourcefile, $destfile, $forcedwidth =, $forcedheight = 80) {
Get the original picture width high
$getimgsize = getimagesize ($sourcefile);
if (empty ($getimgsize)) {
return 0;
} else {
$SRC _width = $getimgsize [0];
$SRC _height = $getimgsize [1];
if ($src _width = = 0 | | $src _height = = 0) {
return 0;
}
}

$src _scale = $src _width/$src _height;
$des _scale = $forcedwidth/$forcedheight;

if ($src _width <= $forcedwidth && $src _height <= $forcedheight) {
$des _width = $src _width;
$des _height = $src _height;
$n = Clip ($sourcefile, $destfile, 0, 0, $des _width, $des _height);
return FileSize ($destfile);
The original is a horizontal rectangle.
} elseif ($src _scale >= $des _scale) {
With the height of the original image as the standard, the abbreviation
$des _height = $src _height;
$des _width = $src _height/$des _scale;
$n = Clip ($sourcefile, $destfile, 0, 0, $des _width, $des _height);
if ($n <= 0) return 0;
$r = Thumb ($destfile, $destfile, $forcedwidth, $forcedheight);
return $r [' filesize '];
The original is a vertical rectangle
} else {
With the width of the original image as the standard, the abbreviation
$des _width = $src _width;
$des _height = $src _width/$des _scale;
$n = Clip ($sourcefile, $destfile, 0, 0, $des _width, $des _height);
if ($n <= 0) return 0;
$r = Thumb ($destfile, $destfile, $forcedwidth, $forcedheight);
return $r [' filesize '];
}
}

?>

We set the return content in PHP, will find that, in the corresponding situation, the return content appears in the page of the IFRAME, so we set the corresponding class, so that the front-end to get the return content, make the corresponding treatment. Clip (), Clip_thumb () to crop the picture function, can compress the picture size, trim the picture to the upper left corner as the starting point, the length width is 100 square.

Js:
Copy Code code as follows:

var jsubmit_file = Jinput.filter (' [name= ' submit_file] ');
var jfile = Jinput.filter (' [name= ' file '] ');
var jiframe = $ (' #iframe ');
var jthumb = $ ('. Thumb ');
var type = ';
Jfile.on (' Change ', function () {
var path = Jfile.val ();
var File_arr = Path.split ('. ');
Type = File_arr[file_arr.length-1];
Jsubmit_file.trigger (' click ');
});
Jiframe.on (' Load ', function () {
var jiframe_message = $ (window.frames[' iframe '].document). Find ('. Iframe_message ');
if (jiframe_message.attr (' status ')!= 0) {
var url = this.contentWindow.location.href;
var Url_arr = url.split (' = ');
Jthumb.attr (' src ', url_arr[1] + '. ' + type);
}
Alert (Jiframe_message.text ());
});

This basic realization of the picture upload, upload results prompt, real-time display upload the latest avatar these several functions, the Internet has a variety of plug-ins, although the function is rich, that is, the volume is too large, this look we choose.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.