是否可以对HTML5 FileList对象进行排序以更改要上载的图像的顺序？

Question

我有一个带有拖放图像上传的表单。该脚本使用HTML5文件对象，并显示缩略图。一切正常。

我现在希望能够在最终发送表单之前更改文件/图像的顺序，并将图像保存在服务器/数据库中。

为此，我想在我的预览中添加jQuery Ui，在update（）中我尝试访问FileList对象作为第一步。但即使我上传了2张图片，我的提醒（files.length）;返回0.这里有什么问题？我只是看不出自己的错误或说得更好，我想我还没有完全理解HTML5文件对象，是否有可能我正在尝试或有更好的方法？

<script>
$(function() {
  $("#dropzonePreview").sortable({
    items:'.dz-preview',
    cursor: 'move',
    opacity: 0.5,
    containment: '#dropzonePreview',
    distance: 20,
    tolerance: 'pointer',
    update: function(e, ui){
         // Added below Code 

        // fileInput is an HTML input element: 
        // <input id="myfile" class="dz-hidden-input" type="file" multiple="multiple" accept="image/*" style="position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">
        var fileInput = document.getElementById("myfile");

        // files is a FileList object (similar to NodeList)
        var files = fileInput.files;
        var file;
        alert (files.length);
        // loop trough files
        for (var i = 0; i < files.length; i++) {
            // get item
            file = files.item(i);
            //or
            file = files[i];

            alert(file.name);
        }

        },
  }); 
});
</script>

UPDATE 1：这里是dropzone的代码，用于创建隐藏输入字段

    Dropzone.prototype.init = function() {
  var eventName, noPropagation, setupHiddenFileInput, _i, _len, _ref, _ref1;
  if (this.element.tagName === "form") {
    this.element.setAttribute("enctype", "multipart/form-data");
  }
  if (this.element.classList.contains("dropzone") && !this.element.querySelector(".dz-message")) {
    this.element.appendChild(Dropzone.createElement("<div class=\"dz-default dz-message\"><span>" + this.options.dictDefaultMessage + "</span></div>"));
  }
  if (this.clickableElements.length) {
    setupHiddenFileInput = (function(_this) {
      return function() {
        if (_this.hiddenFileInput) {
          document.body.removeChild(_this.hiddenFileInput);
        }
        _this.hiddenFileInput = document.createElement("input");
        _this.hiddenFileInput.setAttribute("type", "file");
        _this.hiddenFileInput.id = ("myfile"); // entered this myself
        if ((_this.options.maxFiles == null) || _this.options.maxFiles > 1) {
          _this.hiddenFileInput.setAttribute("multiple", "multiple");
        }
        _this.hiddenFileInput.className = "dz-hidden-input";
        if (_this.options.acceptedFiles != null) {
          _this.hiddenFileInput.setAttribute("accept", _this.options.acceptedFiles);
        }
        if (_this.options.capture != null) {
          _this.hiddenFileInput.setAttribute("capture", _this.options.capture);
        }
        _this.hiddenFileInput.style.visibility = "hidden";
        _this.hiddenFileInput.style.position = "absolute";
        _this.hiddenFileInput.style.top = "0";
        _this.hiddenFileInput.style.left = "0";
        _this.hiddenFileInput.style.height = "0";
        _this.hiddenFileInput.style.width = "0";
        document.body.appendChild(_this.hiddenFileInput);
        return _this.hiddenFileInput.addEventListener("change", function() {
          var file, files, _i, _len;
          files = _this.hiddenFileInput.files;
          if (files.length) {
            for (_i = 0, _len = files.length; _i < _len; _i++) {
              file = files[_i];
              _this.addFile(file);
            }
          }
          return setupHiddenFileInput();
        });
      };
    })(this);
    setupHiddenFileInput();
  }