网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
内容
    这篇文章主要介绍了jQuery插件jcrop+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 id="choose">
    <input name="files" type="file" multiple />
    <button id="btn">上传</button>
    </div>
    <div id="images">
    <p></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>
    以上所述就是本文的全部内容了，希望大家能够喜欢。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 0:19:37