jQuery FilePond - 파일업로드 및 이미지 최적화

 

jQuery FilePond는 JavaScript 라이브러리인 FilePond용 편리한 jQuery 어댑터로, 무엇이든 업로드할 수 있고, 더 빠른 업로드를 위해 이미지를 최적화하며, 훌륭하고 액세스 가능하며 매끄럽고 부드러운 사용자 경험을 제공합니다.

 

또한 이미지 편집이 필요하십니까?

 

Pintura는 최신 JavaScript 이미지 편집기 를 찾고 있습니다. Pintura는 자르기 종횡비 설정 , 크기 조정 , 회전 , 자르기 및 이미지 뒤집기 를 지원 합니다. 무엇보다도 FilePond와 아름답게 통합됩니다.

 

 

Learn more about Pintura

Pintura Image Editor, a Powerful JavaScript Image Editor SDK

 

Installation

 

Install from npm

npm install jquery-filepond --save

Or form a CDN:

<input type="file" class="my-pond" name="filepond"/>

<!-- include jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<!-- include FilePond library -->
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>

<!-- include FilePond plugins -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>

<!-- include FilePond jQuery adapter -->
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>

<script>
  $(function(){
  
    // First register any plugins
    $.fn.filepond.registerPlugin(FilePondPluginImagePreview);

    // Turn input element into a pond
    $('.my-pond').filepond();

    // Set allowMultiple property to true
    $('.my-pond').filepond('allowMultiple', true);
  
    // Listen for addfile event
    $('.my-pond').on('FilePond:addfile', function(e) {
        console.log('file added event', e);
    });

    // Manually add a file using the addfile method
    $('.my-pond').first().filepond('addFile', 'index.html').then(function(file){
      console.log('file added', file);
    });
  
  });
</script>