filepicker.io를 사용하여 동일한 페이지에 여러 드롭 창을 만드는 방법

openbees

기본적으로 테이블이 있고 각 행에는 드롭 창으로 전환하려는 이미지 아이콘이 있습니다. 모든 예제 코드가 도움이 될 것입니다.

Krystiangw

작동 예 : http://jsfiddle.net/krystiangw/mb4o7kfc/1/

JS 파일 :

$('td').each(function(e, element){

    filepicker.makeDropPane(
        element, 
        {
          multiple: true,
          dragEnter: function() {
            $(element).html("Drop to upload").css({
              'backgroundColor': "#E0E0E0",
              'border': "1px solid #000"
            });
          },
          dragLeave: function() {
            $(element).html("Drop files here").css({
              'backgroundColor': "#F6F6F6",
              'border': "1px dashed #666"
            });
          },
          onSuccess: function(Blobs) {

            $(element).text(JSON.stringify(Blobs));
          },
          onError: function(type, message) {
            $(element).text('('+type+') '+ message);
          },
          onProgress: function(percentage) {
            $(element).text("Uploading ("+percentage+"%)");
          }
        }
    );

});

HTML 파일 :

<table id="myTable" class="table table-bordered">     
  <tr>
    <th>
        Drag&drop panel
    </th>
  </tr>
    <tr>
    <td>
        Drop files here
    </td>
  </tr>
    <tr>
    <td>
        Or here
    </td>
  </tr>
    <tr>
    <td>
        Or here
    </td>
  </tr>
</table>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

동일한 옵션을 사용하여 여러 선택 드롭 다운을 만들지 만 드롭 다운 당 동일한 옵션 선택을 허용하지 않는 방법 (페이지를 다시로드하지 않음)?

분류에서Dev

play pdf를 사용하여 동일한 pdf 문서에서 분리 된 페이지를 만드는 방법

분류에서Dev

docker- 동일한 이미지를 사용하여 여러 컨테이너를 만드는 방법을 작성하십시오.

분류에서Dev

동일한 UIImagePickerController를 사용하여 여러 이미지 뷰에 이미지를로드하는 방법

분류에서Dev

동일한 이름의 "data-target"속성을 사용하여 여러 팝업을 만드는 방법

분류에서Dev

Flutter를 사용하여 동일한 화면에 여러 가로`GridView`를 만드는 방법

분류에서Dev

Django-동일한 페이지에서 여러 개체를 동적으로 만드는 방법

분류에서Dev

Terraform을 사용하여 azure에 대한 목록 / 개수를 사용하여 고유하고 동일하지 않은 이름으로 동일한 유형의 여러 리소스를 만드는 방법은 무엇입니까?

분류에서Dev

JavaScript에서 동일한 변수 이름을 재사용하지 않고 객체의 여러 인스턴스를 만드는 방법

분류에서Dev

Codeigniter에서 드롭 다운 옵션을 사용하여 페이지 매김을 만드는 방법

분류에서Dev

Sly.js-한 페이지에 여러 캐 러셀을 만드는 방법

분류에서Dev

타겟을 사용하여 동일한 코드베이스를 사용하여 여러 앱을 시작하는 방법은 무엇입니까?

분류에서Dev

단일 벡터를 사용하여 여러 열이있는 행렬을 만드는 방법

분류에서Dev

동일한 방법을 공유하는 여러 스레드에서 Random 사용

분류에서Dev

DefaultListModel을 사용하여 값이 다른 여러 Jlist를 만드는 방법

분류에서Dev

Eclipse Kepler에서 WindowBuilder 코어를 사용하여 간단한 창을 만드는 방법은 무엇입니까?

분류에서Dev

자바를 사용하여 팝업 창을 만드는 방법

분류에서Dev

자바 스크립트 또는 JS 라이브러리를 사용하여 filePicker 창을 닫는 방법은 무엇입니까?

분류에서Dev

HTML을 사용하여 표를 여러 웹 페이지에로드하는 방법은 무엇입니까?

분류에서Dev

안드로이드에서 뷰 페이저를 사용하여 이미지 파일 이름을 얻는 방법

분류에서Dev

안드로이드에서 뷰 페이저를 사용하여 이미지 파일 이름을 얻는 방법

분류에서Dev

C # winforms를 사용하여 여러 스타일로 레이블을 만드는 방법은 무엇입니까?

분류에서Dev

Boost ASIO를 사용하여 서버에 대한 여러 연결을 만드는 방법

분류에서Dev

d3를 사용하여 산점도의 여러 점에 대한 도구 설명을 만드는 방법

분류에서Dev

imagemagick을 사용하여 여러 이미지에 동일한 이미지를 추가하는 방법

분류에서Dev

Python을 사용하여 여러 동적 선택 필드가있는 페이지에서 데이터를 스크랩하는 방법은 무엇입니까?

분류에서Dev

PHP를 사용하여 여러 선택 드롭 다운을 텍스트 영역에 에코하는 방법

분류에서Dev

외부 라이브러리에서 WPF를 사용하여 동적으로 변경 가능한 스타일을 만드는 방법은 무엇입니까?

분류에서Dev

한 페이지에 여러 개의 공유 버튼을 만드는 방법

Related 관련 기사

  1. 1

    동일한 옵션을 사용하여 여러 선택 드롭 다운을 만들지 만 드롭 다운 당 동일한 옵션 선택을 허용하지 않는 방법 (페이지를 다시로드하지 않음)?

  2. 2

    play pdf를 사용하여 동일한 pdf 문서에서 분리 된 페이지를 만드는 방법

  3. 3

    docker- 동일한 이미지를 사용하여 여러 컨테이너를 만드는 방법을 작성하십시오.

  4. 4

    동일한 UIImagePickerController를 사용하여 여러 이미지 뷰에 이미지를로드하는 방법

  5. 5

    동일한 이름의 "data-target"속성을 사용하여 여러 팝업을 만드는 방법

  6. 6

    Flutter를 사용하여 동일한 화면에 여러 가로`GridView`를 만드는 방법

  7. 7

    Django-동일한 페이지에서 여러 개체를 동적으로 만드는 방법

  8. 8

    Terraform을 사용하여 azure에 대한 목록 / 개수를 사용하여 고유하고 동일하지 않은 이름으로 동일한 유형의 여러 리소스를 만드는 방법은 무엇입니까?

  9. 9

    JavaScript에서 동일한 변수 이름을 재사용하지 않고 객체의 여러 인스턴스를 만드는 방법

  10. 10

    Codeigniter에서 드롭 다운 옵션을 사용하여 페이지 매김을 만드는 방법

  11. 11

    Sly.js-한 페이지에 여러 캐 러셀을 만드는 방법

  12. 12

    타겟을 사용하여 동일한 코드베이스를 사용하여 여러 앱을 시작하는 방법은 무엇입니까?

  13. 13

    단일 벡터를 사용하여 여러 열이있는 행렬을 만드는 방법

  14. 14

    동일한 방법을 공유하는 여러 스레드에서 Random 사용

  15. 15

    DefaultListModel을 사용하여 값이 다른 여러 Jlist를 만드는 방법

  16. 16

    Eclipse Kepler에서 WindowBuilder 코어를 사용하여 간단한 창을 만드는 방법은 무엇입니까?

  17. 17

    자바를 사용하여 팝업 창을 만드는 방법

  18. 18

    자바 스크립트 또는 JS 라이브러리를 사용하여 filePicker 창을 닫는 방법은 무엇입니까?

  19. 19

    HTML을 사용하여 표를 여러 웹 페이지에로드하는 방법은 무엇입니까?

  20. 20

    안드로이드에서 뷰 페이저를 사용하여 이미지 파일 이름을 얻는 방법

  21. 21

    안드로이드에서 뷰 페이저를 사용하여 이미지 파일 이름을 얻는 방법

  22. 22

    C # winforms를 사용하여 여러 스타일로 레이블을 만드는 방법은 무엇입니까?

  23. 23

    Boost ASIO를 사용하여 서버에 대한 여러 연결을 만드는 방법

  24. 24

    d3를 사용하여 산점도의 여러 점에 대한 도구 설명을 만드는 방법

  25. 25

    imagemagick을 사용하여 여러 이미지에 동일한 이미지를 추가하는 방법

  26. 26

    Python을 사용하여 여러 동적 선택 필드가있는 페이지에서 데이터를 스크랩하는 방법은 무엇입니까?

  27. 27

    PHP를 사용하여 여러 선택 드롭 다운을 텍스트 영역에 에코하는 방법

  28. 28

    외부 라이브러리에서 WPF를 사용하여 동적으로 변경 가능한 스타일을 만드는 방법은 무엇입니까?

  29. 29

    한 페이지에 여러 개의 공유 버튼을 만드는 방법

뜨겁다태그

보관