Dropzone Js在上传之前获取文件数据(csv。xlsx)

问题描述 投票:0回答:1

我是Dropzone Js的新手,我想上传一个文件,将数据处理到json,然后上传到我的Flask服务器。我感谢任何帮助,谢谢。

var id = '#kt_dropzone_4';
// set the preview element template
var previewNode = $(id + " .dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parent('.dropzone-items').html();
previewNode.remove();

var myDropzone4 = new Dropzone(id, { // Make the whole body a dropzone
  url: "/Upload", // Set the url for your upload script location
  headers: {
    'x-csrftoken': $('#csrf_Upload').val()
  },
  method: "post",
  parallelUploads: 5,
  acceptedFiles: ".xls, .xlsx, .csv",
  previewTemplate: previewTemplate,
  maxFilesize: 2, // Max filesize in MB
  autoQueue: false, // Make sure the files aren't queued until manually added
  previewsContainer: id + " .dropzone-items", // Define the container to display the previews
  clickable: id +
    " .dropzone-select" // Define the element that should be used as click trigger to select files.
});

myDropzone4.on("addedfile", function (file) {
  // Hookup the start button
  file.previewElement.querySelector(id + " .dropzone-start").onclick = function () {
    myDropzone4.enqueueFile(file);
  };
  $(document).find(id + ' .dropzone-item').css('display', '');
  $(id + " .dropzone-upload, " + id + " .dropzone-remove-all").css('display', 'inline-block');

  //remove duplicates
  if (this.files.length) {
    var i, len;
    for (i = 0, len = this.files.length; i < len - 1; i++) // -1 to exclude current file
    {
      if (this.files[i].name === file.name && this.files[i].size === file.size && this.files[i]
        .lastModifiedDate.toString() === file.lastModifiedDate.toString()) {
        this.removeFile(file);
        $('#muted-span').text('Duplicates are not allowed').attr('class', 'kt-font-danger kt-font-bold').hide()
          .fadeIn(1000)
        setTimeout(function () {
          $('#muted-span').hide().text('Only Excel and csv files are allowed for upload')
            .removeClass('kt-font-danger kt-font-bold').fadeIn(500);
        }, 2500);

      }
    }
  }
});

// Update the total progress bar
myDropzone4.on("totaluploadprogress", function (progress) {
  $(this).find(id + " .progress-bar").css('width', progress + "%");
});

myDropzone4.on("sending", function (file, response) {
  console.log(file)
  console.log(response)

  // Show the total progress bar when upload starts
  $(id + " .progress-bar").css('opacity', '1');
  // And disable the start button
  file.previewElement.querySelector(id + " .dropzone-start").setAttribute("disabled", "disabled");
});

// Hide the total progress bar when nothing's uploading anymore
myDropzone4.on("complete", function (progress) {
  var thisProgressBar = id + " .dz-complete";
  setTimeout(function () {
    $(thisProgressBar + " .progress-bar, " + thisProgressBar + " .progress, " + thisProgressBar +
      " .dropzone-start").css('opacity', '0');
  }, 300)

});

// Setup the buttons for all transfers
document.querySelector(id + " .dropzone-upload").onclick = function () {
  myDropzone4.enqueueFiles(myDropzone4.getFilesWithStatus(Dropzone.ADDED));
};

// Setup the button for remove all files
document.querySelector(id + " .dropzone-remove-all").onclick = function () {
  $(id + " .dropzone-upload, " + id + " .dropzone-remove-all").css('display', 'none');
  myDropzone4.removeAllFiles(true);
};

// On all files completed upload
myDropzone4.on("queuecomplete", function (progress) {
  $(id + " .dropzone-upload").css('display', 'none');
});

// On all files removed
myDropzone4.on("removedfile", function (file) {
  if (myDropzone4.files.length < 1) {
    $(id + " .dropzone-upload, " + id + " .dropzone-remove-all").css('display', 'none');
  }
});

我还没有找到从dropzonejs获取上传数据的方法。我试图用FileReader读取文件,但是它不是二进制数据(如果我输入错了,请更正我)。

我需要在myDropzone4.on(“ addedfile”,function(file){})上处理数据并尽可能以json格式返回。

javascript python
1个回答
0
投票

我找到了答案,我只需要找到输入类型文件。使用dropzone.js时,您可以在html页面或它们的javascript文件中找到输入类型文件,在其中我发现输入类型文件是用一个隐藏该元素的类创建:

var setupHiddenFileInput = function setupHiddenFileInput() {
                if (_this3.hiddenFileInput) {
                    _this3.hiddenFileInput.parentNode.removeChild(_this3.hiddenFileInput);
                }
                _this3.hiddenFileInput = document.createElement("input");
                _this3.hiddenFileInput.setAttribute("type", "file");
                _this3.hiddenFileInput.setAttribute("id", "123");
                if (_this3.options.maxFiles === null || _this3.options.maxFiles > 1) {
                    _this3.hiddenFileInput.setAttribute("multiple", "multiple");
                }


                // _this3.hiddenFileInput.className = "dz-hidden-input";
}

所以我给了它一个id并将一个事件绑定到输入,然后我读取了两个函数的文件,具体取决于上传的文件的格式,对于csv文件到json:

    function getText(fileToRead) {
    var reader = new FileReader();
    reader.readAsText(fileToRead);
    reader.onload = loadHandler;
    reader.onerror = errorHandler;
}

function loadHandler(event) {
    var csv = event.target.result;
    process(csv);
}

function process(csv) {
    // Newline split
    var lines = csv.split("\n");
    result = [];
    var headers = lines[0].split(",");
    for (var i = 1; i < lines.length - 1; i++) {
        var obj = {};
        //Comma split
        var currentline = lines[i].split(",");
        for (var j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j];
        }
        result.push(obj);
    }
    console.log(result);
}

function errorHandler(evt) {
    if (evt.target.error.name == "NotReadableError") {
        alert("Canno't read file !");
    }
}

将excel文件(xls,xlsx)格式读取为json格式:

    var ExcelToJSON = function () {
    this.parseExcel = function (file) {
        var reader = new FileReader();

        reader.onload = function (e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, {
                type: 'binary'
            });
            workbook.SheetNames.forEach(function (sheetName) {
                // Here is your object
                var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[
                    sheetName]);
                var json_object = JSON.stringify(XL_row_object);
                console.log(JSON.parse(json_object));
                jQuery('#xlx_json').val(json_object);
            })
        };

        reader.onerror = function (ex) {
            console.log(ex);
        };

        reader.readAsBinaryString(file);
    };
};

将检测输入变化,检测文件格式然后使用其中之一以JSON格式获取结果的事件:

$(document).ready(function () {
    $('input[type="file"]').on('change', function (e) {
        // EXCEL TO JSON
        var files = e.target.files;
        console.log(files)
        var xl2json = new ExcelToJSON();
        xl2json.parseExcel(files[0]);

        var fileName = e.target.files[0].name;
        console.log('The file "' + fileName + '" has been selected.');


        // CSV TO JSON
        var files = e.target.files;
        if (window.FileReader) {
            getText(files[0]);
        } else {
            alert('FileReader are not supported in this browser.');
        }
    });
});

我希望这可以帮助我在具有keenthemes实现的情况下使用dropzonejs。

© www.soinside.com 2019 - 2024. All rights reserved.