dz-removeリンクを移動するにはDropzone.js

Question

下の画像に、コンテンツの領域の外側にファイルリンクを削除する位置を変更したいと考えています。

私はカスタムテンプレートのビットを使ってみました。

質問 コンテンツ領域のファイルの削除ボタンをどのようにすることができますか？下の画像の代わりに。

私は私が正しくあなたを理解していれば、私は、100％わからないんだけど、別の領域に

<div id="content"> 

    <div id="my-dropzone" class="dropzone"> 
     <span class="">Content Div Area</span> 
     <div class="dz-message"> 
      <h3>Drop files here</h3> or <strong>click</strong> to upload 
     </div> 
    </div> 

    <div class="dropzone_preview" id="dz-preview"> 
     <div class="dropzone_details"> 
      <img data-dz-thumbnail /> 
     </div> 
     <a id="dz-remove" href="javascript:undefined;" data-dz-remove>Remove <-- here</a> 
    </div> 

</div> 

<script src="<?php echo base_url(); ?>vendor/jquery/jquery.min.js"></script> 
<script src="<?php echo base_url(); ?>vendor/dropzone/dropzone.min.js"></script> 

<script> 
Dropzone.autoDiscover = false; 
var myDropzone = new Dropzone("#my-dropzone", { 

    url: "<?php echo site_url("images/upload") ?>", 
    acceptedFiles: "image/*", 
    addRemoveLinks: true, 
    thumbnailWidth: null, 
    thumbnailHeight: null, 
    addRemoveLinks: true, 
    previewTemplate: document.getElementById('dz-preview').innerHTML, 
    removedfile: function(file) { 

    var name = file.name; 

    $.ajax({ 
     type: "post", 
     url: "<?php echo site_url("images/remove") ?>", 
     data: { file: name }, 
     dataType: 'html' 
    }); 

    var previewElement; 
    return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0); 
    }, 
    init: function() { 
     this.on("thumbnail", function(file, dataUrl) { 
      $('.dz-image').last().find('img').attr({width: '100%', height: '100%'}); 
     }), 
     this.on("success", function(file) { 
      $('.dz-image').css({"width":"100%", "height":"auto"}); 
     }); 
     var me = this; 
     $.get("<?php echo site_url("images/list_files") ?>", function(data) { 
      // if any files already in server show all here 
      if (data.length > 0) { 
       $.each(data, function(key, value) { 
       var mockFile = value; 
       me.emit("addedfile", mockFile); 
       me.emit("thumbnail", mockFile, "<?php echo base_url(); ?>uploads/" + value.name); 
       me.emit("complete", mockFile); 
       }); 
      } 
     }); 
    } 
}); 
</script> 

Answer 1

を削除画像リンクを持つことができるようにしたいです、しかしpreviewTemplateはあなたの問題を解決することはありませんか？ HTML：：

<div id="preview-template" class="dz-preview dz-file-preview"> 
    <div class="dz-details"> 
    <div class="dz-filename"><span data-dz-name></span></div> 
    <div class="dz-size" data-dz-size></div> 
    <img data-dz-thumbnail /> 
    </div> 
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div> 
    <div class="dz-success-mark"><span>✔</span></div> 
    <div class="dz-error-mark"><span>✘</span></div> 
    <div class="dz-error-message"><span data-dz-errormessage></span></div> 
<div><img src="removebutton.png" alt="Click me to remove the file." data-dz-remove /></div> 
</div> 
<div id="content"> 
<div id="my-dropzone" class="dropzone"> 
<div class="dz-message"> 
<h3>Drop files here</h3> or <strong>click</strong> to upload 
</div> 
</div> 
</div> 

JS：

<script> 
Dropzone.autoDiscover = false; 
var myDropzone = new Dropzone("#my-dropzone", { 
..., 
previewTemplate: document.getElementById('preview-template').innerHTML 
}); 
</script> 

次にあなたがCSSどこ除去]ボタンを表示するようにして変更することができます

は、あなたがこのような何かをhttp://www.dropzonejs.com/#config-previewTemplate

を参照してください。