Загрузка файла HTML5: что должно быть добавлено к FormData

Question

Это сообщение выглядит многообещающим, но я не могу понять, что такое blobFile в коде? Где я могу получить эту переменную?

How to upload a file using jQuery.ajax and FormData


Дополнительный вопрос:

Я предполагаю, что FormData объект содержит данные в ВСЕХ полей ввода включая ввода имени файла. Но это не так. В противном случае нам не нужно добавлять данные файла в FormData. Может ли кто-нибудь объяснить, почему входной файл не включен в FormData?

Кроме того, я использую бэкэнд Django, который по конвенциональному доступу загружает файлы в request.FILES. Как я могу поместить данные файла в request.FILES, а не request.POST с $.ajax()?

EDIT Я просто понял, что НИЧЕГО в моем request.POST и formData в пустой. не могу понять, почему .. Вот соответствующий код:

// HTML

<form action="" method="POST" enctype="multipart/form-data">{% csrf_token %} 
    <span class='file-name' id='file-name-1'>FILE 1</span> 
    <input type="file" id='id_image'> 
    <input class="browse-click" type="button" value="+"/> 
    <input id="send" type="submit" value="change"> 
</form> 

// JS

<script> 
    // when button is clicked, the file browser opens 
    $('.browse-click').on("click" , function() { 
     $('#id_image').click(); 
    }); 

    // upload file async when file is selected in file browser 
    $('#id_image').on('change', function() { 
     var currentpath = window.location.pathname; 
     var formData = new FormData($('form')[0]); 
     formData.append('csrfmiddlewaretoken', '{{ csrf_token }}'); 
     $.ajax({ 
      url: currentpath, //server script to process data 
      type: 'POST', 
      xhr: function() { // custom xhr 
       var myXhr = $.ajaxSettings.xhr(); 
       if(myXhr.upload){ // check if upload property exists 
        myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload 
       } 
       return myXhr; 
      }, 
      data: formData, 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 
    }); 

    function progressHandlingFunction(e){ 
     if(e.lengthComputable){ 
      $('progress').attr({value:e.loaded,max:e.total}); 
     } 
    } 
</script> 

Answer 1

A FormData Объект данных может быть создан экземпляром формы или без него.
Если это экземпляр с элементом формы, все поля в форме будут автоматически добавлены в объект данных формы.
Если это не так (в этом случае вы связались), вам необходимо добавить все поля в данные формы вручную с помощью метода добавления.
blobFile, скорее всего, Blob, вы также можете использовать File, который вы можете получить из входных файлов.

Answer 2

HTML5 предлагает совершенно новый API, что позволяет делать вещи с файлами (в некоторой степени ...)

Описание: article описание использования.

var blob = file.slice(startingByte, endindByte); 
reader.readAsBinaryString(blob);