Bild anzeigen Hochgeladener Bereich in Dropzone

Question

Hallo! Ich implementiere Dropzone.js für die Erstellung von Gallary. Ich stehe vor einem kleinen Problem. Im Drop-down-Modus zeigt Dropzone einen leeren Containerbereich mit einem anklickbaren Effekt an, um ein oder mehrere Fotos hochzuladen. Aber ich möchte diesen Effekt überschreiben und möchte Bild-Upload-Optionen wie in Bild oben gezeigt zeigen.

Bis jetzt habe ich versucht, dies zu überschreiben, indem ich CSS überging, aber das Ergebnis war wie folgt.

Welche CSS-Code sollte ich gezielt die gewünschte Wirkung zu erzielen?

dropzone.css

.dropzone, .dropzone * { 
    box-sizing: border-box; } 

.dropzone { 
    min-height: 150px; 
    border: 2px dotted rgba(0, 0, 0, 0.3); 
    background: white; 
    padding: 20px 20px; } 
    .dropzone.dz-clickable { 
    cursor: pointer; } 
    .dropzone.dz-clickable { 
     cursor: default; } 
    .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { 
     cursor: pointer; 
     border: 2px dotted black; 
    } 
    .dropzone.dz-started .dz-message { 
    display: none; } 
    .dropzone.dz-drag-hover { 
    border-style: solid; } 
    .dropzone.dz-drag-hover .dz-message { 
     opacity: 0.5; } 
    .dropzone .dz-message { 
    text-align: center; 
    margin: 2em 0; } 
    .dropzone .dz-preview { 
     //border: 2px dotted grey; 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
    margin: 16px; 
    min-height: 100px; } 
    .dropzone .dz-preview:hover { 
     z-index: 1000; } 
     .dropzone .dz-preview:hover .dz-details { 
     opacity: 1; } 
    .dropzone .dz-preview.dz-file-preview .dz-image { 
     border-radius: 20px; 
     background: #999; 
     background: linear-gradient(to bottom, #eee, #ddd); } 
    .dropzone .dz-preview.dz-file-preview .dz-details { 
     opacity: 1; 

    } 
    .dropzone .dz-preview.dz-image-preview { 
    // background: yellow; 
    background: white;} 
     .dropzone .dz-preview.dz-image-preview .dz-details { 
     -webkit-transition: opacity 0.2s linear; 
     -moz-transition: opacity 0.2s linear; 
     -ms-transition: opacity 0.2s linear; 
     -o-transition: opacity 0.2s linear; 
     transition: opacity 0.2s linear; } 
    .dropzone .dz-preview .dz-remove { 
     font-size: 14px; 
     text-align: center; 
     display: block; 
     cursor: pointer; 
     border: none; } 
     .dropzone .dz-preview .dz-remove:hover { 
     text-decoration: underline; } 
    .dropzone .dz-preview:hover .dz-details { 
     opacity: 1; } 
    .dropzone .dz-preview .dz-details { 
     z-index: 20; 
     position: absolute; 
     top: 0; 
     left: 0; 
     opacity: 0; 
     font-size: 13px; 
     min-width: 100%; 
     max-width: 100%; 
     padding: 2em 1em; 
     text-align: center; 
     color: rgba(0, 0, 0, 0.9); 
     line-height: 150%; } 
     .dropzone .dz-preview .dz-details .dz-size { 
     margin-bottom: 1em; 
     font-size: 16px; } 
     .dropzone .dz-preview .dz-details .dz-filename { 
     white-space: nowrap; } 
     .dropzone .dz-preview .dz-details .dz-filename:hover span { 
      border: 1px solid rgba(200, 200, 200, 0.8); 
      background-color: rgba(255, 255, 255, 0.8); } 
     .dropzone .dz-preview .dz-details .dz-filename:not(:hover) { 
      overflow: hidden; 
      text-overflow: ellipsis; } 
      .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { 
      border: 1px solid transparent; } 
     .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { 
     background-color: rgba(255, 255, 255, 0.4); 
     padding: 0 0.4em; 
     border-radius: 3px; } 
    .dropzone .dz-preview:hover .dz-image img { 
     -webkit-transform: scale(1.05, 1.05); 
     -moz-transform: scale(1.05, 1.05); 
     -ms-transform: scale(1.05, 1.05); 
     -o-transform: scale(1.05, 1.05); 
     transform: scale(1.05, 1.05); 
     -webkit-filter: blur(8px); 
     filter: blur(8px); } 
    .dropzone .dz-preview .dz-image { 
     //border: 1px double grey; 
     border-radius: 20px; 
     overflow: hidden; 
     width: 120px; 
     height: 120px; 
     position: relative; 
     display: block; 
     z-index: 10; } 
     .dropzone .dz-preview .dz-image img { 
     display: block; } 
    .dropzone .dz-preview.dz-success .dz-success-mark { 
     -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); 
     -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); 
     -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); 
     -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); 
     animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } 
    .dropzone .dz-preview.dz-error .dz-error-mark { 
     opacity: 1; 
     -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); 
     -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); 
     -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); 
     -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); 
     animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } 
    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { 
     pointer-events: none; 
     opacity: 0; 
     z-index: 500; 
     position: absolute; 
     display: block; 
     top: 50%; 
     left: 50%; 
     margin-left: -27px; 
     margin-top: -27px; } 
     .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { 
     display: block; 
     width: 54px; 
     height: 54px; } 
    .dropzone .dz-preview.dz-processing .dz-progress { 
     opacity: 1; 
     -webkit-transition: all 0.2s linear; 
     -moz-transition: all 0.2s linear; 
     -ms-transition: all 0.2s linear; 
     -o-transition: all 0.2s linear; 
     transition: all 0.2s linear; } 
    .dropzone .dz-preview.dz-complete .dz-progress { 
     opacity: 0; 
     -webkit-transition: opacity 0.4s ease-in; 
     -moz-transition: opacity 0.4s ease-in; 
     -ms-transition: opacity 0.4s ease-in; 
     -o-transition: opacity 0.4s ease-in; 
     transition: opacity 0.4s ease-in; } 
    .dropzone .dz-preview:not(.dz-processing) .dz-progress { 
     -webkit-animation: pulse 6s ease infinite; 
     -moz-animation: pulse 6s ease infinite; 
     -ms-animation: pulse 6s ease infinite; 
     -o-animation: pulse 6s ease infinite; 
     animation: pulse 6s ease infinite; } 
    .dropzone .dz-preview .dz-progress { 
     opacity: 1; 
     z-index: 1000; 
     pointer-events: none; 
     position: absolute; 
     height: 16px; 
     left: 50%; 
     top: 50%; 
     margin-top: -8px; 
     width: 80px; 
     margin-left: -40px; 
     background: rgba(255, 255, 255, 0.9); 
     -webkit-transform: scale(1); 
     border-radius: 8px; 
     overflow: hidden; } 
     .dropzone .dz-preview .dz-progress .dz-upload { 

     background: #333; 
     background: linear-gradient(to bottom, #666, #444); 
     position: absolute; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     width: 0; 
     -webkit-transition: width 300ms ease-in-out; 
     -moz-transition: width 300ms ease-in-out; 
     -ms-transition: width 300ms ease-in-out; 
     -o-transition: width 300ms ease-in-out; 
     transition: width 300ms ease-in-out; } 
    .dropzone .dz-preview.dz-error .dz-error-message { 
     display: block; } 
    .dropzone .dz-preview.dz-error:hover .dz-error-message { 
     opacity: 1; 
     pointer-events: auto; } 
    .dropzone .dz-preview .dz-error-message { 
     pointer-events: none; 
     z-index: 1000; 
     position: absolute; 
     display: block; 
     display: none; 
     opacity: 0; 
     -webkit-transition: opacity 0.3s ease; 
     -moz-transition: opacity 0.3s ease; 
     -ms-transition: opacity 0.3s ease; 
     -o-transition: opacity 0.3s ease; 
     transition: opacity 0.3s ease; 
     border-radius: 8px; 
     font-size: 13px; 
     top: 130px; 
     left: -10px; 
     width: 140px; 
     background: #be2626; 
     background: linear-gradient(to bottom, #be2626, #a92222); 
     padding: 0.5em 1.2em; 
     color: white; } 
     .dropzone .dz-preview .dz-error-message:after { 
     content: ''; 
     position: absolute; 
     top: -6px; 
     left: 64px; 
     width: 0; 
     height: 0; 
     border-left: 6px solid transparent; 
     border-right: 6px solid transparent; 
     border-bottom: 6px solid #be2626; } 

Answer 1

Auf Ihrem HTML wickeln nur das Formularelement zugeordnet Sprungplatz in einem div wie:

<div id="wrapper"> 
    <form action="/file-upload" 
       class="dropzone" 
       id="my-awesome-dropzone"> 
    </form> 
</div> 

und dann ein Bild auf Ihrem Wrapper div auf Ihrem CSS zuweisen:

#wrapper{ 
    background-image: url(dropText.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 15em; 
    border: 2px dashed #ccc; 
    padding: 0px 0px; 
    margin: 20px auto; 
    opacity: 0.8; 
    } 

    #wrapper:hover{ 
    -moz-transition: background-image 0.4s ease-in-out 1s; 
    -webkit-transition: background-image 0.4s ease-in-out 1s; 
    -ms-transition: background-image 0.4s ease-in-out 1s; 
    -o-transition: background-image 0.4s ease-in-out 1s; 
    background-image: url(uploadPic.png); 
    opacity: 1; 
    } 

erinnern auch die Form Opazität zu ändern:

#my-awesome-dropzone{ 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    }