当我尝试对服务器加载的文件进行排序时使用dropzone js会收到以下错误
未捕获的TypeError：无法在“ FileReader”上执行“ readAsDataURL”：
参数1不是'Blob'类型。在Dropzone.createThumbnail ...在Dropzone._processThumbnailQueue
我相信错误与将不正确的mockFile变量推入dropzone文件有关吗？作为对象而不是模拟流程需要的File对象？
以下是我目前正在使用的代码
function getFiles() {
$.getJSON('/listing/attachments/'+$('input[name="listing"]').val(),
function(data) {
if ( data ) {
$.each(data, function(i, item) {
var mockFile = {
name: item.name,
size: 23233,
status: 'success',
type: 'image/jpeg'
};
dropzone.emit("addedfile", mockFile);
dropzone.emit("thumbnail", mockFile, item.file);
dropzone.emit("complete", mockFile);
dropzone.files.push(mockFile);
});
}
});
}
var dropzone = new Dropzone(".dropzone", {
uploadMultiple: false,
parallelUploads: 100,
maxFilesize: 8,
maxFiles: 20,
addRemoveLinks: true,
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
init:function() {
var self = this;
this.on("removedfile", function(file) {
$.ajax({
type: 'POST',
url: '/upload/delete',
data: {id: file.name, listing: $('input[name="listing"]').val(), _token: $('input[name="_token"]').val()},
dataType: 'html',
success: function(data){
var rep = JSON.parse(data);
if(rep.code == 200) {
}
}
});
} );
if ( $('input[name="listing"]').val() ) {
getFiles();
}
},
});
$(function(){
$(".dropzone").sortable({
items:'.dz-preview',
cursor: 'move',
opacity: 0.5,
containment: '.dropzone',
distance: 20,
tolerance: 'pointer',
update: function(e, ui){
var files = dropzone.files;
files.sort(function(a, b){
return ($(a.previewElement).index() > $(b.previewElement).index()) ? 1 : -1;
})
dropzone.removeAllFiles();
dropzone.handleFiles(files);
dropzone.processQueue();
}
});
});
提前谢谢了 ：）
最佳答案
在花了很多时间之后，我终于有了一个解决方案，可以使用dropzone.js使jquery可排序。我将关注的脚本放在首位，然后将整个dropzone js脚本放在第二位。评论应解释正在发生的事情。
init: function() {
// very important to make the sortable work
var myDropzone = this;
// In your drop zone you have your click handler event
document.getElementById("submit").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
// the new array where we will put in the new files
var current_queue = [];
// the array we want to upgrade
var oldArray = myDropzone.files;
// on the webpage search for all the images that have been uploaded
var imageTags = $('#myDropzone').find('div.dz-image img');
// iterate through all the images that have been uploaded by the user
imageTags.each(function( index, imageTag ) {
// get the image name from the images
imageName = imageTag.alt;
// now we will iterate through the old array
var i;
for (i = 0; i < oldArray.length; i++) {
/** if the name of the image on the website is the same as the image from the old array
* we will add it to the new array. You can see this as sorting the array.
*/
if(imageName === oldArray[i].name){
current_queue.push(oldArray[i]);
}
}
});
/** after everything is done we will update the old array with the
* new array so it knows that the files have been sorted.
*/
myDropzone.files = current_queue;
// dropzone will now submit the request
e.stopPropagation();
myDropzone.processQueue();
});
如果您对完整的dropzone js脚本感兴趣：
$("#myDropzone").sortable({
opacity: 0.7,
});
Dropzone.options.myDropzone = {
// Configuration
url: '../somewhere',
method: 'post',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
addRemoveLinks: true,
// The setting up of the dropzone
init: function() {
// very important to make the sortable work
var myDropzone = this;
// In your drop zone you have your click handler event
document.getElementById("submit").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
// the new array where we will put in the new files
var current_queue = [];
// the array we want to upgrade
var oldArray = myDropzone.files;
// on the webpage search for all the images that have been uploaded
var imageTags = $('#myDropzone').find('div.dz-image img');
// iterate through all the images that have been uploaded by the user
imageTags.each(function( index, imageTag ) {
// get the image name from the images
imageName = imageTag.alt;
// now we will iterate through the old array
var i;
for (i = 0; i < oldArray.length; i++) {
/** if the name of the image on the website is the same as the image from the old array
* we will add it to the new array. You can see this as sorting the array.
*/
if(imageName === oldArray[i].name){
current_queue.push(oldArray[i]);
}
}
});
/** after everything is done we will update the old array with the
* new array so it knows that the files have been sorted.
*/
myDropzone.files = current_queue;
// dropzone will now submit the request
e.stopPropagation();
myDropzone.processQueue();
});
this.on('completemultiple', function(file, json) {
});
// sendingmultiple event
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function(data, xhr, formData) {
formData.append("name", jQuery("#name").val());
formData.append("sample1", jQuery("#sample1").val());
});
this.on("successmultiple", function(files, response) {
// redirecting user on success. No message atm.
var url = document.location.origin + "/somewhere_to_redirect";
window.location.replace(url);
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
关于javascript - 服务器加载文件中的Dropzone.js可排序文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46062931/