Альтернатива FormData для поддержания порядка свойств - PullRequest
0 голосов
/ 04 апреля 2020

Для загрузки на Amazon S3 необходимо сохранить указанный c порядок в данных вашей формы. Например, в настоящее время у меня есть нечто, похожее на это:

  var formData = new FormData();
  formData.append('acl', 'acl here');
  formData.append('key', 'key here');
  formData.append('file', "file goes here e.g. $('#fileUpload')[0].files[0]");

А затем типичный вызов ajax.

Есть ли альтернатива FormData, которая определенно сохранит порядок свойства? В этом случае «acl» должен быть первым, «ключ» вторым, «файл» последним.

В поисках альтернативы, потому что согласно caniuse.com, 8% глобального трафика c не поддерживает FormData.

Единственный альтернативный способ, который я могу придумать, - это иметь форму HTML, заполнять поля динамически с помощью JavaScript (они не известны при загрузке страницы), а затем отправлять форму через jQuery ajaxSubmit формы (для получения процента прогресса). Я хотел бы избежать необходимости иметь форму HTML и использовать форму jQuery.

Весь код:

    // TODO: Find alternative to FormData, keeping a 100% JS-solution (only library: jQuery)
    var formData = new FormData();
    formData.append('acl','acl');
    formData.append('key', 'key');
    formData.append('file', $('#fileUpload')[0].files[0]);

    $.ajax({
        url: 'https://MyLittleBucket.s3-accelerate.amazonaws.com',
        type: 'post',
        data: formData,
        enctype: 'multipart/form-data',
        contentType: false,
        processData: false,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();

            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    var percentComplete = e.loaded / e.total * 100;
                    console.log(percentComplete);
                }
            };

            return xhr;
        },
        success: function() {
            console.log('File uploaded');
        },
        error: function() {
            console.log('Upload error');
        }
    });

Примечание. HTML и я ищу событие "change" в JS, а затем продолжаю загрузку выше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...