Thinkphp_ Image upload cropping function

Preparation materials

1. thinkphp

2. jquery Form Plug-in

3. Cropper cropping plug-in

Ideas: Using thinkphp Upload file class and picture cutting class, the front desk to find ways to combine parameters to the backstage how can you commit files asynchronously? The key is the jquery form plugin.

Background preparation

Thinkphp Upload class http://www.kancloud.cn/manual/thinkphp/1876

Thinkphp Clipping class http://www.kancloud.cn/manual/thinkphp/1878

Front Desk Preparation

jquery form plug-in http://malsup.com/jquery/form/#code-samples Chinese document http://www.cnblogs.com/linzheng/archive/2010/11/17/ 1880288.html

Crop plugin http://www.jqcool.net/image-cropper.html

Instant preview of images (no uploading of files)

/** *  get   Local picture  url */ function getfileurl (SourceID)  {from  file  domain  var url; if  (Navigator.userAgent.indexOf ("MSIE") >=1)  { // ie url  = document.getelementbyid (SourceID). Value; } else if (Navigator.userAgent.indexOf (" Firefox ") >0)  { // firefox url = window. Url.createobjecturl (document.getElementById (SourceID). Files.item (0));  } else if ( Navigator.userAgent.indexOf ("Chrome") >0)  { // chrome url = window. Url.createobjecturl (document.getElementById (SourceID). Files.item (0));  } return url; }  /** *  display local picture   to browser  */ function preimg (Sourceid, targetid)  {  var url = getfileurl (SourceID);  var imgpre = document.getelementbyid ( Targetid);  imgpre.src = url; } //Trigger event Call  preimg (This.id, ' IMgpre '); 

Thinkphp_ picture upload cropping feature