jquery plugin Jcrop+fileapi Perfect image upload + cropping + Preview code sharing

Source: Internet
Author: User
Tags min relative wrapper

This article mainly introduces the jquery plug-in jcrop+fileapi perfect picture upload + cropping + Preview code, very simple and practical, the effect is also very good, the need for small partners can refer to.

Web page to crop pictures, do not need to go through the server.

This is accomplished with the Https://github.com/mailru/FileAPI framework. cooperate with Jcrop.

Advanced browsers use canvas cropping, IE6 7 8 use flash over.

Core code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45, 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 var el = $ (' input '). Get (0);   seajs.use ([' Gallery/jcrop/0.9.12/jcrop.css ', ' Gallery/jcrop/0.9.12/jcrop.js '], function () {  FileAPI.event.on (el, ' Change ', function (evt) {var files = Fileapi.getfiles (EVT); Retrieve file list   fileapi.filterfiles (files, function (file, info) {if (!/^image/.test (File.type)) {alert (' picture lattice Incorrect type "); return false; else if (file.size > * fileapi.mb) {alert (' picture must be less than 20M '); return false;} else{return true;}  }, function (fi Les, rejected) {console.log (files);   if (files.length) {var file = Files[0]; var img0 = fileapi.image (file); Var im G1 = fileapi.image (file); var ratio = 0; Fileapi.getinfo (file, function (err, info) {//get image ratio if (!err) {if (Info.width > Info.height) {ratio = info . width/500; else {ratio = info.height/500;}} });   Img0.resize (+, ' max ')//place image and register Jcrop. Get (Function (Err, IMG) {$ (' #img2 '). empty (); $ (' #img 2 '). Append ($ (IMG));  $ (' #img2 '). Children (). Jcrop ({aspectratio:1, bgcolor: ' Rgba (0,0,0,0.4) ', Onselect:function (c) {img1.matrix.sx = c.x * ratio; img1.matrix.sy = C.Y * ratio; IMG1.MATRIX.SW = C.W * ratio; img1.matrix.sh = c.h * ratio; IMG1.MATRIX.DW = 500; IMG1.MATRIX.DH = 500;   Img1.get (function (Err, IMG) {//$ (' #img3 '). empty ();//$ (' #img3 '). Append ($ (IMG)); $ (' #img3 '); HTML ($ (IMG));});  }); }); $ (' #btn '). On (' click ', Function () {fileapi.upload {//url: '/testupfile/upfile ',//headers: {' Content-type ': ' Multipart/form-data '}, files: {images:img1}, Progress:function (EVT) {/* ... */}, Complete:function (err, XHR) {/* ... * *//alert (Xhr.responsetext); Console.log (XHR); } }); }); } }); }); });

Complete code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 <! DOCTYPE html> <html> <head> <title>todo supply a title</title> <meta charset= "UTF-8" > & Lt;meta name= "viewport" content= "Width=device-width" > <script src= "/jquery.min.js" ></script> < Script src= "./jcrop/jquery. Jcrop.min.js "></script> <link href="./jcrop/jquery. Jcrop.min.css "rel=" stylesheet "> </head> <style>  . upload-btn {width:130px; height:25px; overflow : Hidden; position:relative; BORDER:3PX solid #06c; border-radius:5px; Background: #0cf;  }. upload-btn:hover {background: #09f;} upload-btn__txt {z-index:1; position:relative; color: #fff; font-size : 18px; font-family: "Helvetica neue"; line-height:24px; Text-align:center; text-shadow:0 1px 1px #000; }. UPLOAD-BTN input {top: -10px, right: -40px; z-index:2; position:absolute; cursor:pointer; opacity:0; filter:alpha (opacity=0); font-size:50px; }   </style>     <body> <div> <!--"Js-fiLeapi-wrapper "--Required class--> <div class=" Js-fileapi-wrapper upload-btn "id=" choose ">   <input NA Me= "Files" type= "file" multiple/> <button id= "btn" > Upload </button> </div> <div id= "Images" > & nbsp <p style= "margin-top:40px;" ></p>   <div id= "Img2" ></div>   <div id= "IMG3" ></div> </div>   & Lt;/div>   <script>window. Fileapi = {staticpath: './fileapi/'};</script> <script src= './fileapi/fileapi.min.js ' ></script> <script>   var el = $ (' input '). Get (0);     FileAPI.event.on (el, ' Change ', function (evt) {var files = fileapi.getfiles (evt);//Retrieve file list &nbs P Fileapi.filterfiles (Files, function (file, info) {if (!/^image/.test (File.type)) {alert (' incorrect picture format '); return false;} else if (file.size > * fileapi.mb) {alert (' picture must be less than 20M '); return false;} else{return true;}  }, function (Files, r ejected) {    if (files.length) {var file = Files[0]; var img0 = fileapi.image (file); var img1 = fileapi.image (file); var ratio = 0; Fileapi.getinfo (file, function (err, info) {//get image ratio if (!err) {if (Info.width > Info.height) {ratio = info . width/500; else {ratio = info.height/500;}} });   Img0.resize (+, ' max ')//place image and register Jcrop. Get (Function (Err, IMG) {$ (' #img2 '). empty (); $ (' #img 2 '). Append ($ (IMG));   $ (' #img2 '). Children (). Jcrop ({aspectratio:1, bgcolor: ' Rgba (0,0,0,0.4) ', Onselect:function (c) {img1.matrix.sx = c.x * ratio; img1.matrix.sy = C.Y * ratio; IMG1.MATRIX.SW = C.W * ratio; img1.matrix.sh = c.h * ratio; IMG1.MATRIX.DW = 500; IMG1.MATRIX.DH = 500;   Img1.get (function (Err, IMG) {//$ (' #img3 '). empty ();//$ (' #img3 '). Append ($ (IMG)); $ (' #img3 '); HTML ($ (IMG));});  }); }); $ (' #btn '). On (' click ', Function () {fileapi.upload ({url: '/testupfile/upfile ',   files: {IMAGES:IMG1}, Progress:fu Nction (EVT) {/* ... */}, Complete:funCtion (Err, XHR) {//*///alert (xhr.responsetext);  });  });  }); });   </script> </body> </html>

The above is the entire contents of this article, I hope you can enjoy.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.