thinkphp5.0 Image upload plugin can preview cropping pictures and save the original picture, after performing the cropping picture will delete the cropped original picture catalog, in order to reduce the space. Specific implementation of the code for reference under this article
Effect preview:
The main function of the plug-in is: You can preview the cropped picture and save the original picture, after performing the cropping of the picture will delete the original picture catalog, in order to reduce space.
First, download the attachment
Address: Link: Https://pan.baidu.com/s/1nuQ4NgP Password: 4PBU
Second, put the cropavatar.php in the attachment to their own program directory extend/org directory, if you encounter exif_imagetype error, you need to open php.ini Extension=php_exif.dll
Third, common.php public function
Locate the common.php file in the application directory and add the common functions inside it:
/** * Convert bytes * @param $bytes Incoming byte value * @param int $decimals * @return string bkmgtp */function human_filesize ($bytes, $decima ls = 2) {$sz = ' bkmgtp '; $factor = Floor ((strlen ($bytes)-1)/3); return sprintf ("%.{ $decimals}f ", $bytes/pow (1024x768, $factor)). @ $sz [$factor];} /** * Delete the directory and all files and folders under that directory * @param $dir directory * @return bool */function removedir ($dirName) {//To determine if the incoming parameter is a directory, such as not to perform a delete file if (!i S_dir ($dirName)) {//delete file @unlink ($dirName);}//If incoming is a directory, use @opendir to open the directory, assign the returned handle to $handle $handle = @opendir ($dirName ); Here it is explicitly tested whether the return value is all equal (the value and type are the same) false//Otherwise the name of any directory entry evaluates to False will cause the loop to stop (for example, a directory named "0") while (($file = @readdir ($handle))!== FALSE) {//In the file structure, it will contain a shape such as "." and ".." The upward structure//But they are not files or folders if ($file! = '. ' && $file! = ' ... ') {//Current file $dir to file directory + file $dir = $dirName. '/'. $file; Determine if $dir is a directory, and if it is a directory, recursively call the RemoveDir ($dirName) function//To delete the files and directories in it, or delete the file Is_dir ($dir) If it is not a directory? RemoveDir ($dir): @unlink ($dir); }} closedir ($handle); return rmdir ($dirName);}
Iv. Modifying configuration files
Locate the configuration file config.php under the application directory and add it in the configuration:
You need to add one before uploading the configuration root directory. ' Syc_images ' = [ //thumbnail save position ' thumb ' = ' + './uploads/thumbs ', //Attachment picture save location ' image ' = './uploads/ Images ', ///Crop the original picture save location ' original ' + './uploads/original ', //upload limit 2*1024*1024 ' size ' = 2097152,],
V. Put the file-thumd-modal.html file in the View folder as a template file, such as:
Six, the controller, the attachment of the thumbs.php file is a sample controller, you can take the controller to your program directory, modify the namespace, method name, etc., the controller has a method is: Index (), the method is to upload a file call method, If you want to display a page that chooses a file, you also need to write an action method, such as: Test ().
Public Function test () { return $this->fetch ();} Public Function Index () {...}Seven, the view layer, in the View folder definition of a test method related to the template file, the page's <body> tags need to add class= "page-header-fixed", because JS inside need to use. <a class= "BTN Red btn-outline sbold avatar-view" > select picture </a> This tab is used to open the modal box, class is Avatar-view,{include file= " Public/file-thumd-modal "} to introduce the file-thumd-modal.html file, you need to find the template file write address.
<! DOCTYPE html>//id= "Art-thumb" returns the image address//id= "Preview" returned by the IMG Small map//The page needs to introduce bootstrap js,css and jquery filesTo do these steps, we can use the plug-in, some other like: Picture storage location, image return path, etc., can be in the corresponding file to modify.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
