Javascript Dropzone.js可从服务器加载的文件中排序文件

当我尝试对服务器加载的文件进行排序时，使用dropzone js会收到以下错误

未捕获的TypeError:未能在“FileReader”上执行“readAsDataURL”： 参数1不是“Blob”类型。在Dropzone.createThumbnail。。。在Dropzone处。\u processThumbnailQueue

我认为错误与将错误的mockFile变量推入dropzone文件有关？作为mockflow需要的对象而不是文件对象？

下面是我目前使用的代码

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

---

非常感谢：）

在花了很多时间之后，我终于有了一个解决方案，可以让jquery与dropzone.js协同工作。我将把感兴趣的脚本放在第一位，然后是完整的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();
    });

init:function（）{
//使可排序工作正常非常重要
var myDropzone=this；
//在拖放区域中，您有单击处理程序事件
document.getElementById（“提交”）.addEventListener（“单击”），函数（e）{
//确保表单没有实际发送。
e、 预防默认值（）；
//我们将在其中放入新文件的新数组
var current_queue=[]；
//我们要升级的阵列
var oldArray=myDropzone.files；
//在网页上搜索已上载的所有图像
var-imageTags=$（“#myDropzone”）.find（'div.dz-image-img'）；
//遍历用户上传的所有图像
imageTags.每个（函数（索引，imageTag）{
//从图像中获取图像名称
imageName=imageTag.alt；
//现在我们将遍历旧数组
var i；
对于（i=0；i

如果您对完整的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
    });

}

}

$（“#myDropzone”）。可排序({
不透明度：0.7，
});
Dropzone.options.myDropzone={
//配置
url:“../somewhere”，
方法：“post”，
自动处理队列：false，
uploadMultiple:true，
并行上传：100，
最大文件数：100，
addRemoveLinks：是的，
//dropzone的设置
init:function（）{
//使可排序工作正常非常重要
var myDropzone=this；
//在拖放区域中，您有单击处理程序事件
document.getElementById（“提交”）.addEventListener（“单击”），函数（e）{
//确保表单没有实际发送。
e、 预防默认值（）；
//我们将在其中放入新文件的新数组
var current_queue=[]；
//我们要升级的阵列
var oldArray=myDropzone.files；
//在网页上搜索已上载的所有图像
var-imageTags=$（“#myDropzone”）.find（'div.dz-image-img'）；
//遍历用户上传的所有图像
imageTags.每个（函数（索引，imageTag）{
//从图像中获取图像名称
imageName=imageTag.alt；
//现在我们将遍历旧数组
var i；
对于（i=0；i