Ошибка при загрузке одного изображения ajax

Question

У меня возникли проблемы при загрузке одного файла ajax. вот мой код.

JS файл

var _submit = document.getElementById('fileInputBox'); 
var formData = new FormData(); 
formData.append('upload', 'upload'); 
formData.append('SelectedFile', _submit.files[0]); 

$('#fileInputBox').on('change', function (e) { 
    e.preventDefault(); 

    $.ajax({ 
    url: 'upload2.php', 
    type: 'POST', 
    data: formData, 
    dataType: 'json' , 
    async: false, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function (data) { 
     $('#sep_s').html(data.msg); 
    } 

}); 

    // return false; 
}); 

HTML файл

<form action="" method="post" enctype="multipart/form-data" name="UploadForm" id="UploadForm"> 

    <div id="AddFileInputBox"> 
      <input id="fileInputBox" style="margin-bottom: 5px;" type="file" name="file"/> 
    </div> 
    </form> 

PHP файл

if(isset($_POST['upload'])) 
    { 
    $ImageName   = $_FILES['file']['name']; 
    $ImageSize   = $_FILES['file']['size']; 
     $TempSrc  = $_FILES['file']['tmp_name']; 
     $ImageType  = $_FILES['file']['type']; 
    .......... 

И им ошибки получаю

Примечание: Undefined индекс: файл в G: \ здесь установлен \ upload2.php на линии
Примечание: Undefined индекс: файл в G: \ здесь установлен \ upload2 .php on line
и так далее.

что это не так?

Answer 1

используется SelectedFile в качестве параметра в данной форме, но использовать file в PHP, например

$ImageName = $_FILES['SelectedFile']['name']; 

Кроме того, необходим, чтобы получить файл для загрузки внутри обработчика изменения событий, то есть, когда на самом деле файл выбран.

$('#fileInputBox').on('change', function (e) { 
    var _submit = document.getElementById('fileInputBox'); 
    var formData = new FormData(); 
    formData.append('upload', 'upload'); 
    formData.append('SelectedFile', _submit.files[0]); 
    ... 

Answer 2

Одна из проблем, я вижу, что вы приложите изображение на странице нагрузки, не тогда, когда он на самом деле получает набор/изменения.

Вы должны поместить этот код в обработчик события:

$('#fileInputBox').on('change', function() { 

    // put this inside the function so that its get set when you assign a value 
    var _submit = document.getElementById('fileInputBox'); 
    var formData = new FormData(); 
    formData.append('upload', 'upload'); 
    formData.append('SelectedFile', _submit.files[0]); 

    $.ajax({ 
    url: 'upload2.php', 
    type: 'POST', 
    data: formData, 
    dataType: 'json' , 
    async: false, 
    cache: false, 
    contentType: false, 
    processData: false, 
    success: function (data) { 
     $('#sep_s').html(data.msg); 
    } 

    }); 
});