我不明白...call 它始终未定义
创建模拟文件：
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");
})
【讨论】：
您也可以使用以下代码：
<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>
编辑
自从 Dropzone 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');
}
【讨论】：
addFile 错误，使用 options.addedfile.call 代替了
我的 >= 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);
}
}
【讨论】：
resize 和maxFiles 选项的使用
根据上面 punky 的出色回答，您不应该忘记在末尾添加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();
}
【讨论】：
accepted: true 添加到模拟文件中，则使用this._updateMaxFilesReachedClass(); 毫无意义。
在这个答案https://stackoverflow.com/a/17763511 中，它通过发出 thumbnail 事件来实现。
以下是使用 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 上的工作示例：
【讨论】：
imageURL: '/images/sample.png' 可以清楚地看到的那样，它指的是同一域中的图像。这是一个建立在我的知识基础上的解决方案。您也可以寻求其他解决方案。这是有关您的错误stackoverflow.com/a/27840082/1461060 的更多信息。希望对您有所帮助！
crossOrigin 的配置。请参考developer.mozilla.org/en-US/docs/Web/HTML/Element/img。我也用crossOrigin 选项更新了答案。 jsfiddle.net/gihanchanuka/6gksmdrr/1
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");
关于 Dropzone-Object init: function() { call this:
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);
});
【讨论】：
我也很难做到这一点。以此为起点会更有帮助：
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");
【讨论】：
你可以试试这个
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);
}
});
【讨论】：
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default {
created(){
let app = this;
app.getAdvertById()
},
data: function () {
return {
advertId: null,
advert: {
title: '',
description: '',
confirm: '',
files: {},
category:'',
city:''
},
adverts: [],
dropzoneOptions: {
url: 'https://httpbin.org/post',
thumbnailWidth: 150,
addRemoveLinks: true,
maxFilesize: 0.5,
dictDefaultMessage: 'Plz add your image here...',
headers: { "My-Awesome-Header": "header value" }
},
}
},
methods: {
getAdvertById(){
let app = this;
let id = app.$route.params.id;
app.advertId = id;
axios.get('/api/v1/advert/show/' + app.advertId)
.then(function (resp) {
app.advert = resp.data
app.advert.files = resp.data.files
for (var i = 0; i < app.advert.files.length; i++) {
var mockFile = {id: app.advert.files[i].id, name: app.advert.files[i].file_name, size: app.advert.files[i].size};
app.$refs.myVueDropzone.manuallyAddFile(mockFile, '/advert/' + app.advert.files[i].file_name )
app.$refs.myVueDropzone.dropzone.options.thumbnail.call(app.$refs.myVueDropzone, mockFile, '/advert/' + app.advert.files[i].file_name)
if (app.$refs.myVueDropzone.dropzone.options.maxFiles > 0) {
app.$refs.myVueDropzone.dropzone.options.maxFiles--
}
}
})
.catch(function () {
alert("Could not load your advert")
});
//console.log(app.advert.files)
},
}
} <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>【讨论】：