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

Userpic + crop

 

 

 

$（'#userpic').fileapi（{
   url: 'http:///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-preview userpic__preview">《/div>
   《div class="btn btn-success js-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-progress bar">《/div>《/div>
         《span class="btn-txt">Uploading《/span>
      《/div>
   《/div>
《/div>