网页端实现 图片上传+裁剪+预览（兼容谷歌火狐ie678)

https://www.oschina.net/code/snippet_151376_32651

1. [代码][JavaScript]代码     跳至 [1] [全屏预览]

?
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
43
44
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
84
85
86
87
88
        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);
                                                    }
                                                });
                                         
                                    });
 
 
                    }
                });
            });
         
         
  
         
   });
        
posted @ 2018-03-23 10:20  yangchunlong  阅读(252)  评论(0)    收藏  举报