【转】端资源分享：jquery功能强大文件上传库fileapi[二]

Userpic +crop

 

 

 

$（'#userpic').fileapi（{
   url:'http://rubaxa.org/FileAPI/server/ctrl.php',
   accept: 'image/*',
   imageSize: { minWidth: 200,minHeight: 200 },
   elements: {
     active: { show: '.js-upload', hide: '.js-browse' },
     preview: {
        el: '.js-preview',
        width: 200,
        height: 200
     },
     progress: '.js-progress'
   },
   onSelect: function （evt,ui){
     var file = ui.files[0];
     if（ file ){
        $（'#popup').modal（{
           closeOnEsc: true,
           closeOnOverlayClick: false,
           onOpen: function （overlay){
              $（overlay).on（'click', '.js-upload', function （){
                 $.modal（).close（);
                 $（'#userpic').fileapi（'upload');
              });
              $（'.js-img', overlay).cropper（{
                 file: file,
                 bgColor: '#fff',
                 maxSize: [$（window).width（)-100, $（window).height（)-100],
                 minSize: [200, 200],
                 selection: '90%',
                 onSelect: function （coords){
                    $（'#userpic').fileapi（'crop', file, coords);
                 }
              });
           }
        }).open（);
     }
   }
});

 

HTML:

\

《div id="userpic" class="userpic">
   《div class="js-previewuserpic__preview">《/div>
   《div class="btn btn-successjs-fileapi-wrapper">
     《div class="js-browse">
        《span class="btn-txt">Choose《/span>
        《input type="file" name="filedata">
     《/div>
     《div class="js-upload" style="display: none;">
        《div class="progress progress-success">《div class="js-progressbar">《/div>《/div>
        《span class="btn-txt">Uploading《/span>
     《/div>
   《/div>
《/div>