Невозможно отправить $ _FILES в php-скрипт

Question

Я пытаюсь сделать facebook как загрузчик изображений с помощью самых простых методов. Я выбираю несколько изображений на входе, а затем создает бары прогресса файла с именами. Он показывает, что он загружается, но он не отправляется в файл upload.php. У меня есть раздел HTML-кода:

<div class="container"> 
    <h1>Uploader</h1> 
    <hr> 
    <form action="#" id="image_form"> 
     <input type="file" id='image' name="image" multiple> 
    </form> 
    <div class="container"> 
     <div class="filelist"> 
    </div> 
    <ul id="uploads"> 
    </ul> 
</div> 

Тогда у меня есть javascript. Строки прогресса создаются с именами файлов, и прогресс отслеживается. Я пробовал его с довольно большими файлами, и для загрузки требуется много времени. Индикатор выполнения показывает это точно.

$('#image').change(function (event) { 
    var files = this.files; 

    // iterate over each file to upload, send a request, and attach progress event 
    for (var i = 0, file; file = files[i]; i++) { 
     var li = $("<li>" + file.name + "<div class='progress progress-striped active'><div class='progress-bar' style='width:0%'>" + file.size + "</div></div></li>"); 

     // add the LI to the list of uploading files 
     $("#uploads").append(li); 

     // fade in the LI instead of just showing it 
     li.hide().fadeIn(); 

     var xhr = new XMLHttpRequest(); 
     xhr.upload.li = li; 
     xhr.upload.addEventListener('progress', function(e) { 
      var percent = parseInt(e.loaded/e.total * 100); 
      this.li.find(".progress-bar").width(percent+'%'); 
     }, false); 

     // setup and send the file 
     xhr.open('POST', 'upload.php', true); 
     xhr.setRequestHeader('X-FILE-NAME', file.name); 
     xhr.send(file); 
    } 
}); 

я боролся с этой частью кода на прошлой неделе и были почти через каждую тему на этом сайте, без успеха. Пожалуйста, помогите мне выяснить, почему я не могу опубликовать данные файла в скрипте php.

Answer 1

Я использую этот код, чтобы отправлять файлы PHP:

function postFile(action, file, postFileName) { 

    var fPostName = typeof postFileName === 'undefined' ? 'file' : postFileName; 
    /* Create a FormData instance */ 
    var formData = new FormData(); 
    /* Add the file */ 
    formData.append(fPostName, file); 

    var requestUrl = rootUrl + action; 

    return new Promise(function (resolve, reject) { 
     var xhr = new XMLHttpRequest(); 
     xhr.open('POST', requestUrl); 

     /* handlers */ 
     xhr.onload = function() { 
      if (this.status >= 200 && this.status < 300) { 
       resolve(xhr.response); 
      } else { 
       reject({ 
        status: this.status, 
        statusText: xhr.statusText 
       }); 
      } 
     }; 
     xhr.onerror = function() { 
      reject({ 
       status: this.status, 
       statusText: xhr.statusText 
      }); 
     }; 

     console.log(formData); 
     /* send request */ 
     xhr.send(formData); 
    }); 
    } 

// Sample usage 
* <<< FILE upload >>>>>> 
* var file = document.getElementById('f').files[0]; 
* console.log(file); 
* postFile('your_processing_script.php', file).then(function (response) { 
*  console.log(response); 
* },function (er) { 
*  console.log(er); 
* }); 

, а затем в PHP вы должны иметь:

$_FILES["file"] or $_FILES[postFileName] 

Надеется, что это помогает вам. Cheers