DropzoneJS

Question

일반적인 질문 : 나는 내 테이블 레이아웃 유적 요소에 싸여되고 기본적으로의 테이블의 전체 폭을 채우기 위해 내 DROPZONE에 추가 ​​된 행을 얻을 수있는 방법

.

설명 :

나는 테이블 형식으로 업로드 된 파일을 표시하도록 DropzoneJS를 얻기 위해 노력하고있어. 내 Dropzone 내 테이블에 제대로 있지만 previewTemplate 제대로 표시 할 수 없습니다. DROPZONE는 <td></td> 요소에 파일을 추가 할 수 없기 때문에 모든 첫째, 문제가 발생합니다, 그래서

<div class="div-tr"> 
    <div class="div-td"></div> 
    <div class="div-td"></div> 
</div> 

내 목표는 DropzoneJS에 previewTemplate를 추가하는 것이다이 사용하는 CSS 같은 테이블 레이아웃 형식으로 내 테이블을 변환하는 문제는 기본적으로 DROPZONE가 previewTemplate에서 <div>에 클래스 dz-processing dz-image-preview dz-error dz-success 세트를 추가하는 것입니다이

<div class="div-tr"> 
    <div class="div-td"> 
     <i class="fa fa-file-o"></i> 
    </div> 
    <div class="div-td"> 
     <div class="dz-filename"> 
      <span data-dz-name></span> 
     </div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-size" data-dz-size></div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-progress"> 
      <span class="dz-upload" data-dz-uploadprogress></span> 
     </div> 
    </div> 
    <div class="div-td"> 
     <div class="dz-success-mark"> 
      <span>✔</span> 
     </div> 
     <div class="dz-error-mark"> 
      <span>✘</span> 
     </div> 
    </div> 
</div> 

과 같을 것이다. 문서에 따르면, <div>에 class="dz-preview"으로 추가되지만 해당 클래스가 존재하는지 여부에 관계없이 다른 클래스가 컨테이너의 첫 번째 내부 요소로 추가되어 해당 previewTemplate이 삽입됩니다. 즉, previewTemplate ,, 테이블 행 있어야하는데이 속성의 잃고 이제 추가 <div>은 행의 내부 랩이 추가되고 있기 때문에이 일이 처음 <div class="div-td">

+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
|    |    |   |   | Existing row 
+-------------+--------------+-----------+----------+ 
| | | | |           Row added by upload 
+---+---+--+--+ 

의 폭을 보여줍니다되었다. 테이블에 대한

내 CSS 레이아웃이

/* DIV table style */ 

.div-table{ 
    display: table; 
    width: 100%; 
    background-color: #fff; 
} 
.div-tr{ 
    display: table-row; 
} 
.div-th, .div-td { 
    display: table-cell; 
    padding: 8px 15px; 
    border-bottom: 1px solid #eaeff0; 
    vertical-align: middle; 
} 
.div-thead{ 
    display: table-header-group; 
    font-weight: bold; 
} 
.div-tfoot{ 
    display: table-footer-group; 
    font-weight: bold; 
    background-color: #fff; 
} 
.div-tbody{ 
    display: table-row-group; 
} 

문서가 여기 발견과 같습니다 http://www.dropzonejs.com/#layout

는 CSS를 변경하거나 JS이 감사에 어떤 도움.

Answer 1

미리보기 템플릿을 원하는대로 사용자 정의 할 수 있으므로이 경우에는 사용자의 필요에 따라 div-tr 및 클래스를 미리보기 요소에 추가하기 만하면됩니다().

HTML : :

<div class="dropzone" id="myDropzone"></div> 

    <div class="dropzone-previews div-table"></div> 

    <div id="preview-template" style="display: none;"> 
     <div class="dz-preview dz-file-preview div-tr"> 
      <div class="dz-details"> 
       <div class="dz-filename div-td"><span data-dz-name></span></div> 
       <div class="dz-size div-td" data-dz-size></div> 
       <div class="dz-image div-td"> 
        <img data-dz-thumbnail /> 
       </div> 
      </div> 
      <div class="dz-progress div-td"><span class="dz-upload" data-dz-uploadprogress></span></div> 
      <div class="div-td"> 
       <div class="dz-success-mark"><span>✔</span></div> 
       <div class="dz-error-mark"><span>✘</span></div> 
      </div> 
      <div class="dz-error-message div-td"><span data-dz-errormessage></span></div> 
     </div> 
    </div> 

JS : 여기

는 DROPZONE 템플릿 무시 방법의 예입니다

이

Dropzone.options.myDropzone = { 
    previewsContainer: ".dropzone-previews", 
    previewTemplate: document.getElementById('preview-template').innerHTML, 
    url: 'upload.php', 
    init: function() { 
     this.on('success', function(file){ 
      var errordiv = document.getElementsByClassName('dz-error-mark'); 
      errordiv[errordiv.length - 2].style.display = 'none'; // The -2 is because there is also one in the preview-template 
     }); 
     this.on('error', function(file){ 
      var succesdiv = document.getElementsByClassName('dz-success-mark'); 
      succesdiv[succesdiv.length - 2].style.display = 'none'; 
     }); 
    } 
} 

주 당신은 방금로 할 수있는 테이블을 사용하려는 경우 미리보기에서 요소를 <td> 및 <tr>으로 묶고 div 대신 표로 previewsContainer을 사용합니다.

요소 dz-error-mark과 dz-success-mark은 기본적으로 dropzone에서 항상 볼 수 있으므로 이벤트에 맞게 숨길 수 있습니다. 이는 init 함수 내부의 코드입니다.아니면 시작 부분에 표시하지 않고 적절하게 표시하는 것이 좋습니다.

템플릿을 변경할 때 dropzone의 기본 동작을 수정하지 않으면 사물이 제대로 표시되지 않습니다.

Here dropzone 문서에서도 언급 된 많이 사용자 지정된 dropzone의 예를 볼 수 있습니다.

Answer 2

나는이 문제를 해결했으며 wallek876의 답은 나를 올바른 방향으로 보냈다. 그래서 그것은 답이 될 것이다.

대답의 세부 사항은 dropzone-previews이 하단에서 테이블의 바깥쪽에있는 것을 보았습니다. 여기서 새로운 요소를 추가해야합니다.

해결 방법 :

는 그래서 같은 <div class="div-table" id="upload-container">에 ID로 upload-container을 움직였다.

저는 <div id="preview-template">을 제안대로 사용하고 <div class="div-tr">을 previewTemplate의 첫 번째 하위 항목으로 적용했습니다. 이 구조는 테이블 레이아웃을 되돌려 주었고 나머지 스타일은 CSS를 사용하여 적용되었습니다.

HTML에 previewTemplate을 배치 할 수 없었습니다.