Question

我有一个问题，就是在删除时将预览图像放在dropzones中。我设置了一个带蓝色边框的dropzone。当我在其中拖动图像时，其预览会略微向右和向下移动。因此，我只在顶部和左侧看到区域的蓝色边框，预览会在右侧和底部线条上方显示。我希望预览图像完全位于dropzone内部，但无法找到正确的方法。

有什么想法吗？以下是CSS代码的摘录 - 有点长，因为我很难找到提到的问题在哪里... 在此先感谢您的帮助！

.dropzone {
  position: relative;
/*  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
  padding: 1em;*/
}

/* *****CHAMP CADRE BLANC***** */
.dropzone .dz-preview,
.dropzone-previews .dz-preview {
  background: rgba(255,255,255,0.8);
  position: relative;
  display: inline-block;
  margin: 0px;
  vertical-align: top;
  border: none;
  padding: 0px 0px 0px 0px;
}


/* *****CHAMP CADRE BLANC***** */
.dropzone .dz-preview .dz-details,
.dropzone-previews .dz-preview .dz-details {
  width: 70px; /*******/
  height: 70px; /*******/
  position: relative;
  background: #ebebeb;
  padding: 0px;
  margin-bottom: 0px;
}
.dropzone .dz-preview .dz-details .dz-filename,
.dropzone-previews .dz-preview .dz-details .dz-filename {
  overflow: hidden;
  height: 100%;
}

/* *****CHAMP IMAGE UPLOADEE***** */
.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px; /*******/
  height: 70px; /*******/
  -webkit-border-radius: 3px;
  border-radius: 3px;
}


/* *****CHAMP CHECKMARK***** */
.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
  display: none;
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 30px;
  text-align: center;
  right: -39px; /*******/
  top: 32px; /*******/
}

.dropzone .dz-preview .dz-progress,
.dropzone-previews .dz-preview .dz-progress {
  position: absolute;
  top: 10px;
  left: 6px;
  right: 6px;
  height: 6px;
  background: #d7d7d7;
  display: none;
}
.dropzone .dz-preview .dz-progress .dz-upload,
.dropzone-previews .dz-preview .dz-progress .dz-upload {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background-color: #8cc657;
}

.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
  display: none;
  position: absolute;
  top: -5px;
  left: -20px;
  background: rgba(245,245,245,0.8);
  padding: 8px 10px;
  color: #800;
  min-width: 140px;
  max-width: 500px;
  z-index: 500;
}


/* *****CHAMP DROPZONE***** */
.dropzone {
  border: 1px solid #256EB8;
  /*min-height: 360px;*/
  height:70px;
  width:70px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  /*background: blue;*/
  background-image: url("MY_IMAGE.png");
  padding: 0px;
  margin:0px;
}

/* *****CHAMP DROPZONE MESSAGE ACCUEIL***** */
.dropzone .dz-default.dz-message {
  opacity: 1;
  background-image: url("../images/spritemap.png");


  /*background-repeat: no-repeat;
  background-position: 0 0;*/
  position: absolute;
  width: 70px; /*******/
  height: 70px; /*******/
  /*margin-left: -214px;
  margin-top: -61.5px;
  top: 50%;
  left: 50%;*/
}
@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
  .dropzone .dz-default.dz-message {

    background-image: url("MY_IMAGE.png");
    -webkit-background-size: 428px 406px;
    -moz-background-size: 428px 406px;
    background-size: 428px 406px;
  }
}

/*.dropzone .dz-preview,
.dropzone-previews .dz-preview {
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
}*/

Answer 1

如果您想上传单张图片，而不更改css dropzone，则可以通过各种方式进行操作。您可以设置图像接收区域的大小＆＃34;蓝色边框＆＃34;并在＆＃34;蓝色边框＆＃34;的区域设置与图像成比例的大小。。考虑来自dropzone.css Ex：

的css填充

＆＃34;蓝色边框＆＃34;可以=＆gt;宽度：1200px，高度：400px，然后：

myDropzone = new Dropzone('#dropzone-form',
{
    url : 'upload_usuario.php?id_usuario='+id_usuario,
    addRemoveLinks : true,
    dictRemoveFile : 'delete',
    maxFiles : 1, //just send one file 
    thumbnailWidth: 1140,//the "size of image" width at px
    thumbnailHeight: 380,//the "size of image" height at px
    dictDefaultMessage: 'Some text here as the ratio of the image to upload Ex: 1140 x 380',
    init: function()
    {
       this.on("maxfilesexceeded", function(file)
       {
          this.removeAllFiles();
          this.addFile(file);
        });

      //more code here.. bla bla

Dropzone.js预览图像定位

1 个答案: