我怎么能告诉你使用Dropzone.js

Question

已经存储在服务器上的文件

我不明白...... call它总是不确定

创建模拟文件：

var mockFile = { name: "Filename", size: 12345 }; 

调用默认addedfile事件处理

myDropzone.options.addedfile.call(myDropzone, mockFile); 

和可选显示文件的缩略图：

myDropzone.options. thumbnail.call(myDropzone, mockFile, "/image/url"); 

Answer 1

终于!!

$(function() { 
    var mockFile = { name: "banner2.jpg", size: 12345 }; 
    var myDropzone = new Dropzone("#my-awesome-dropzone"); 
    myDropzone.options.addedfile.call(myDropzone, mockFile); 
    myDropzone.options.thumbnail.call(myDropzone, mockFile, "http://localhost/test/drop/uploads/banner2.jpg"); 
}) 

Answer 2

我当时也很难过。这一个作为出发点会帮助更多：

Dropzone.autoDiscover = false; // otherwise will be initialized twice 
var myDropzoneOptions = { 
    maxFilesize: 5, 
    addRemoveLinks: true, 
    clickable: true 
}; 
var myDropzone = new Dropzone('#myDropzoneElement', myDropzoneOptions); 
var mockFile = { name: "Existing file!", size: 12345 }; 
myDropzone.options.addedfile.call(myDropzone, mockFile); 
myDropzone.options.thumbnail.call(myDropzone, mockFile, "http://url-to-thumb-goes-here"); 

Answer 3

您也可以用下面的代码：

<script> 
     Dropzone.options.myAwesomeDropzone = false; 
     Dropzone.autoDiscover = false; 
     $("#image").dropzone({ 
      url: "http://someserver.com/upload.php", 
      paramName: "image", // The name that will be used to transfer the file 
      maxFilesize: 2, // MB 
      maxFiles: 5, 
      parallelUploads: 5, 
      addRemoveLinks: true, 
      dictMaxFilesExceeded: "You can only upload upto 5 images", 
      dictRemoveFile: "Delete", 
      dictCancelUploadConfirmation: "Are you sure to cancel upload?", 
      accept: function (file, done) { 
       console.log(file) 
       if ((file.type).toLowerCase() != "image/jpg" && 
         (file.type).toLowerCase() != "image/gif" && 
         (file.type).toLowerCase() != "image/jpeg" && 
         (file.type).toLowerCase() != "image/png" 
         ) { 
        done("Invalid file"); 
       } 
       else { 
        done(); 
       } 
      }, 
      init: function() { 
       var mockFile = { name: "myimage.jpg", size: 12345, type: 'image/jpeg' }; 
       this.addFile.call(this, mockFile); 
       this.options.thumbnail.call(this, mockFile, "http://someserver.com/myimage.jpg"); 
      } 
     }); 
    </script> 

编辑

由于悬浮窗4.0 init功能的更新可以被称为：

init: function() { 
    var mockFile = { name: "myimage.jpg", size: 12345, type: 'image/jpeg' };  
    this.options.addedfile.call(this, mockFile); 
    this.options.thumbnail.call(this, mockFile, "http://someserver.com/myimage.jpg"); 
    mockFile.previewElement.classList.add('dz-success'); 
    mockFile.previewElement.classList.add('dz-complete'); 
} 

Answer 4

您可以使用此

var file_image = "http://someserver.com/myimage.jpg"; 

var mockFile = { name: "myimage.jpg", size: 12345 }; 

$("#dropzone").dropzone({ 

    url: 'false', 
    maxFiles: 1, 
    maxFilesize:10,//mb 
    acceptedFiles:'image/*', 
    init: function() { 
     this.on("addedfile", function(file){ 
      this.options.thumbnail.call(this,file,file_image); 
     }); 
     this.addFile.call(this,mockFile); 
    } 
}); 

Answer 5

我为> = 4.0解决方案尝试，立足于 “如何显示已存储在服务器上的文件”：https://github.com/enyo/dropzone/wiki/FAQ

maxFiles: 1, 

init: function() { 
    this.on('maxfilesexceeded', function (file) { 
     this.removeAllFiles(); 
     this.addFile(file); 
    }); 

    var mocks = $dropzone.data('dropzone'); 
    for (var i = 0; i < mocks.length; i++) { 
     var mock = mocks[i]; 
     mock.accepted = true; 

     this.files.push(mock); 
     this.emit('addedfile', mock); 
     this.createThumbnailFromUrl(mock, mock.url); 
     this.emit('complete', mock); 
    } 
} 

Answer 6

在此应答https://stackoverflow.com/a/17763511，它implemeneted与emmiting一个缩略图事件。

以下是使用createThumbnailFromUrl的示例。

HTML元素;

<form id="sample-img" action="/upload" class="dropzone"> 
    <div class="dz-default dz-message"></div> 
</form> 

JS代码;

previewThumbailFromUrl({ 
    selector: 'sample-img', 
    fileName: 'sampleImg', 
    imageURL: '/images/sample.png' 
}); 

function previewThumbailFromUrl(opts) { 
    var imgDropzone = Dropzone.forElement("#" + opts.selector); 
    var mockFile = { 
     name: opts.fileName, 
     size: 12345, 
     accepted: true, 
     kind: 'image' 
    }; 
    imgDropzone.emit("addedfile", mockFile); 
    imgDropzone.files.push(mockFile); 
    imgDropzone.createThumbnailFromUrl(mockFile, opts.imageURL, function() { 
     imgDropzone.emit("complete", mockFile); 
    }); 
} 

上的jsfiddle

工作样本：

1. Load images on same domain
2. Load images with crossOrigin

Answer 7

基于以上朋克的出色答卷，你不应该忘记在末尾添加this._updateMaxFilesReachedClass();，像所以：

init: function() { 
    var mockFile = { name: <filename>, size: <filesize>, type: <filetype>, url: <file_url> }; 
    this.files.push(mockFile); 
    this.emit('addedfile', mockFile); 
    this.createThumbnailFromUrl(mockFile, mockFile.url); 
    this.emit('complete', mockFile); 
    this._updateMaxFilesReachedClass(); 
} 

Answer 8

在版本> 5中，createThumbnailFromUrl的参数已更改。为了使它再次工作，请查看此GitHub问题：https://github.com/enyo/dropzone/issues/1587#issuecomment-324023260