jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
更新时间：2015年04月22日 12:19:54 投稿：hebedich
这篇文章主要介绍了jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码，非常的简单实用，效果也很棒，有需要的小伙伴可以参考下。
网页端 裁剪图片，不需要经过服务器。
这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop.
高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。
核心代码：
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: '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);
}
});
});
}
});
});
});
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<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 name="files" type="file" multiple />
<button id="btn">上传</button>
</div>
<div id="images">
<p style="margin-top: 40px;"></p>
<div id="img2" ></div>
<div id="img3"></div>
</div>
</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
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){
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: '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: function (evt){ /* ... */ },
complete: function (err, xhr){ /* ... */
//alert(xhr.responseText);
}
});
});
}
});
});
</script>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要介绍了jquery二级导航下拉菜单，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
jQuery结合jQuery.cookie.js插件实现换肤功能示例
这篇文章主要介绍了jQuery结合jQuery.cookie.js插件实现换肤功能,结合实例形式分析了jQuery.cookie.js插件的常用函数功能及实现换肤功能的相关操作技巧,需要的朋友可以参考下2017-10-10
本文为大家介绍下jquery1.9 下如何检测浏览器类型和版本，下面有个不错的示例，大家可以参考下2013-12-12
这是jQuery里常用的2个方法。他们2者功能是完全不同的，而初学者往往会被误导。2010-07-07
实例讲解jQuery EasyUI tree中state属性慎用
本文通过实例代码给大家介绍jQuery EasyUI tree中state属性慎用，切忌把state设置为closed，否则该节点会加载整个tree，形成死循环2016-04-04
在开发项目过程中，用iframe嵌套，会发现一个问题，用iframe嵌套的html结构右边不会自动适应高度。如何解决这一问题呢，下面就跟小编一起来看下吧2016-12-12
jQuery选择器源码解读（八）：addCombinator函数
这篇文章主要介绍了jQuery选择器源码解读（八）：addCombinator函数,本文用详细的注释解读了addCombinator函数的实现源码,需要的朋友可以参考下2015-03-03
编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件2017-03-03
jQuery选择头像并实时显示的代码，以前脚本之家用js实现了，这里使用jquery实现的。2010-06-06
这篇文章主要介绍了Jquery zTree 树控件异步加载操作，学习Jquery zTree异步加载，zTree实现一套能完成大部分常用功能的 Tree插件，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论