使用Dropzone和一个div进行两次预览

时间:2018-08-07 14:54:04

标签: javascript jquery css html5 dropzone.js

早上好社区 我对dropzone.js组件有疑问 我需要一个部分,可以在一格内看到缩略图,请使用组件 dropzone

有人可以帮助我如何创建那部分图像,

  

这是预览,但没有创建其他容器,我需要显示   它在dropzone中而不加载,并在另一个缩略图中显示缩略图   部分

购买摘要和图像结尾将被保存

有人对此有想法吗? 问候和感谢

示例: HTML:

<div id="my-dropzone" class="dropzone">
  <div class="fallback">
    <input type="file" id="file" name="file" multiple />
  </div>
</div>
<div id="lista_imagenes">

</div>

JS:

Dropzone.autoDiscover = false;
var myDropzone = jQuery("#my-dropzone");
myDropzone.dropzone({
        url: "uploadImagen.action",
        method: "post",
        paramName: "file", // El nombre que se usará para transferir el archivo 
        acceptedFiles: "image/*",
        autoProcessQueue: false, //opcion por si se quiere enviar inmediatamente el archivo, {false} : no lo envia inmediatamente
        maxFiles: 6,
        maxFilesize: 2, // MB 
        parallelUploads: 6,
        uploadMultiple: true,
        addRemoveLinks: true,        
        init: function () {
          this.on('removedfile', function (file){
            alert("se elimino");
          });
            this.on('addedfile', function (evt) {
              // var count = this.files.length;                        
            var count = this.files;
            // Obtenemos la imagen del campo "file".
            for (var i = 0, f; f = count[i]; i++) {

              alert(f);
              //Solo admitimos imágenes.
              if (!f.type.match('image.*')) {
                continue;
              }             

              var reader = new FileReader();

              reader.onload = (function(theFile) {
                return function(e) {
                  // Insertamos la imagen
                  var respaldo=document.getElementById("lista_imagenes").innerHTML;
                  document.getElementById("lista_imagenes").innerHTML =respaldo+['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
                };
              })(f);
              reader.readAsDataURL(f);
            }
            });
        }
    });

使用此代码,但不起作用:(

0 个答案:

没有答案