jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享【jquery】

web前端|js教程

jQuery,图片上传,裁剪,预览

web前端-js教程

网页端 裁剪图片，不需要经过服务器。

vivi 源码包,全新电脑安装ubuntu,爬虫系统产品经理,http php,seo分析工作lzw

这个是用 /mailru/FileAPI 框架实现的。配合jcrop.

微信小说小程序源码,ubuntu,tomcat验证码无法加载,用爬虫买火车,虚拟主机php教程外包,seo下拉搜索lzw

高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。

放置类游戏 源码,vscode更改主题,ubuntu 老版,tomcat日志回收,sqlite 存取时间,微擎插件模板消息,程序员前端框架图片,爬虫类好用的卡,php 装饰,盐城seo推广效果,nodejs开源网站程序,可控制网页中图片自由缩放代码,论坛主题贴的模板图片lzw

核心代码：

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(图片格式不正确);return false; } else if(file.size > 20 * FileAPI.MB){alert(图片必须小于20M); return false; } else{return true; } }, function (files, rejected){ console.log(files); 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(500, 500, max) //place image and register jcrop.get(function(err, img) { $(#img2).empty(); $(#img2).append($(img)); $(#img2).children().Jcrop({ aspectRatio: 1, bgColor: gba(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);} });});} });}); });

完整代码：

.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; }

上传

window.FileAPI = { staticPath: ./fileapi/ }; var el = $(input).get(0); FileAPI.event.on(el, change, function (evt){var files = FileAPI.getFiles(evt); // Retrieve file listFileAPI.filterFiles(files, function (file, info){ if( !/^image/.test(file.type) ){alert(图片格式不正确);return false; } else if(file.size > 20 * FileAPI.MB){alert(图片必须小于20M); return false; } else{return true; } }, function (files, rejected){ 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(500, 500, max) //place image and register jcrop.get(function(err, img) { $(#img2).empty(); $(#img2).append($(img)); $(#img2).children().Jcrop({ aspectRatio: 1, bgColor: gba(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: function (evt){ /* ... */ },complete: function (err, xhr){ /* ... */ //alert(xhr.responseText); } });});} });});

以上所述就是本文的全部内容了，希望大家能够喜欢。