Javascript 如何使用Dropzone.js向您显示已存储在服务器上的文件

我不明白<代码>调用其始终未定义

创建模拟文件：

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

调用默认的addedfile事件处理程序

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

并可选择显示文件的缩略图：

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

终于

$(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");
})

---

我也很难接受这个。这一点作为出发点会有更大的帮助：

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");

---

您还可以使用以下代码：

  <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>

你可以试试这个

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);
    }
});

---

我的>=4.0解决方案基于“如何显示已存储在服务器上的文件”：

maxFiles:1，
init：函数（）{
this.on（'maxFilesExcepended'，函数（文件）{
这个.removeAllFiles（）；
此.addFile（文件）；
});
var mocks=$dropzone.data（'dropzone'）；
对于（var i=0；i

在这个答案中，它是通过显示一个缩略图来实现的

下面是使用执行此操作的示例

HTML元素

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

JSFIDLE上的工作示例：

---

基于上面朋克的出色回答，您不应该忘记添加

这个在末尾，如下所示：

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();
}

init:function（）{
var mockFile={name:，size:，type:，url:}；
this.files.push（mockFile）；
this.emit（'addedfile'，mockFile）；
这个.createThumbnailFromUrl（mockFile，mockFile.url）；
这个.emit（'complete'，mockFile）；
这是。_updateMaxFilesReachedClass（）；
}

在Dropzone对象Init:Function（）的Init函数上{调用此函数：

  this.on("addedfile", function(file) {
                        //Access the preview element with file.previewElement and add event listeners, etc... to it.
                        var a = document.createElement('a');
                        a.setAttribute('href',"{{{protokoll}}}://{{{HTTP_HOST}}}/a-getfiledb.php?uuid="+file.uuid);
                        a.setAttribute('class',"btn btn-success");
                        a.setAttribute('style',"width:50%; margin-top:5px; border-left:1px solid black; cursor:pointer;");
                        a.innerHTML = "<i class='glyphicon glyphicon-download-alt'></i>";
                        file.previewTemplate.appendChild(a);
  });

this.on（“addedfile”，函数（文件）{
//使用file.previewElement访问预览元素，并向其中添加事件侦听器等。
var a=document.createElement（'a'）；
a、 setAttribute（'href'，“{{{protokoll}}}://{{{{HTTP_HOST}}}}/a-getfiledb.php？uuid=“+file.uuid”）；
a、 setAttribute（'class'，'btn btn success'）；
a、 setAttribute（'style'，“宽度：50%；页边距顶部：5px；左边框：1px纯黑色；光标：指针；”）；
a、 innerHTML=“”；
文件.previewTemplate.appendChild（a）；
});

从“vue2 dropzone”导入vue2 dropzone
导入“vue2 dropzone/dist/vue2 dropzone.min.css”
导出默认值{
创建（）{
让app=这个；
app.getAdvertById（）
},
数据：函数（）{
返回{
广告ID:null，
广告：{
标题：“”，
说明：“”，
确认：“”，
文件：{}，
类别：“”，
城市：''
},
广告：【】，
dropzoneOptions：{
网址：'https://httpbin.org/post',
指钉宽度：150，
addRemoveLinks：是的，
maxFilesize:0.5，
dictDefaultMessage:“请在此处添加您的图像…”，
标题：{“我的精彩标题”：“标题值”}
},
}
},
方法：{
getAdvertById（）{
让app=这个；
let id=app.$route.params.id；
app.advertId=id；
axios.get（'/api/v1/advert/show/'+app.advertId）
.然后（功能（resp）{
app.advert=相应数据
app.advert.files=resp.data.files
对于（var i=0；i0）{
app.$refs.myVueDropzone.dropzone.options.maxFiles--
}
}
})
.catch（函数（）{
警报（“无法加载您的广告”）
});
//console.log（app.advert.files）
},
}
}
值得注意的是，使用此方法添加的文件与“常规”文件的行为有所不同。首先，调用.removeAllFiles（）时，我似乎无法摆脱它们在dropzone实例上。我将此作为一个问题发布，以防有人想贡献：这是因为您实际上没有向文件数组添加任何文件。请使用thisDropzone.files.push（mockFile）@dan在何处添加推送功能，我在下面添加了thumbnail.call，但它不起作用。问题是它没有将照片缩小到缩略图视图，而是只显示照片的左上角……我想在这里可以找到一个更好、更更新的答案：fwiw，我发现chrome在最新的v o上出现了
addFile
错误f dropzone，使用
options.addedfile.call代替工作了如何取消手动添加文件上的removeLink？请help@Adobe你能说得更具体一点吗？@Vicky Gonsalves Ok。你的解决方案提供在Dropzone中添加现有文件。我在初始化事件“addRemoveLinks”中的值为TRUE。因此所有预先添加的文件都带有“delete link”。但是如何为预添加的文件禁用“romoveLink”？如果您知道哪些是预添加的文件，您可以随时预添加
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);
    });
}

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();
}

 var mockFile = { name: "banner2.jpg", size: 12345, uuid: "085b2b23-70e7-4175-8355-89937d8d46f2" };
 myDropzone.emit("addedfile", mockFile);
 myDropzone.options.thumbnail.call(myDropzone, mockFile, "https://your-thumbnail-image.jpg");

  this.on("addedfile", function(file) {
                        //Access the preview element with file.previewElement and add event listeners, etc... to it.
                        var a = document.createElement('a');
                        a.setAttribute('href',"{{{protokoll}}}://{{{HTTP_HOST}}}/a-getfiledb.php?uuid="+file.uuid);
                        a.setAttribute('class',"btn btn-success");
                        a.setAttribute('style',"width:50%; margin-top:5px; border-left:1px solid black; cursor:pointer;");
                        a.innerHTML = "<i class='glyphicon glyphicon-download-alt'></i>";
                        file.previewTemplate.appendChild(a);
  });