Продвижение загрузки файла Ajax

Question

Ну, я пытаюсь реализовать загрузку файлов с помощью Ajax и Php на моем локальном сервере Apache.

сильный текст

 $('.uploadButton').click(function(){ 
        var formData = new FormData($(this).closest('.fileUploadForm')); 
        $.ajax({ 
         url: 'upload.php', //Server script to process data 
         type: 'POST', 
         xhr: function() { // Custom XMLHttpRequest 
          var myXhr = $.ajaxSettings.xhr(); 
          if(myXhr.upload){ // Check if upload property exists 
           myXhr.upload.onprogress = function(e) { 
            $('progress').attr({value:e.loaded,max:e.total}); 
            $(".progress-bar span").css('width',e.loaded); 
           }; 
          } 
          return myXhr; 
         }, 
         error: function(xhr,status,error) 
         { 
          //$('.progressBarDiv progress').hide(); 
          console.log('Error '+xhr+" "+status+" "+error); 
         }, 
         data: formData, 
         cache: false, 
         contentType: false, 
         processData: false 
        }); 

PHP КОД

<?php 

    $folder = "upload/"; 
    $path = $folder . basename($_FILES['file']['name']); 

    if(move_uploaded_file($_FILES['file']['tmp_name'], $path)) { 
    echo "The file ". basename($_FILES['file']['name']). " has been uploaded"; 
    } else{ 
    echo "There was an error uploading the file, please try again!"; 
    } 
    ?> 

Ошибка

<b>Notice</b>: Undefined index: file in <b>C:\Users\gopir\Server\Apache24\ 
\htdocs\front-page\upload.php</b> on line <b>4</b><br /><br /> 
<b>Notice</b>: Undefined index: file in <b>C:\Users\gopir\Server\Apache24 
\htdocs\front-page\upload.php</b> on line <b>6</b><br /> 
There was an error uploading the file, please try again! success 

Line, который вызвал ошибку является:

var formData = new FormData($(this).closest('.fileUploadForm')); 

Если я изменить эту строку

var formData = new FormData($('form')[0]) 

программа работает отлично.

Я могу видеть данные формы в консоли, устанавливая точки останова в js. Я не знаю, как это решить.

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

Пожалуйста, дайте мне знать, как решить эту проблему. Благодаря

HTML

<form enctype="multipart/form-data" class="fileUploadForm" > 
     <div class="uploadDiv"> 
      </div> 
      <div class="progressUploadDiv">  
       <div class="uploadButton">Upload</div> 
      </div> 
     </div> 
    </form> 

Answer 1

FormData параметр конструктора HTML <form> элемент. Попробуйте код ниже.

var formData = new FormData($(this).closest('.fileUploadForm')[0]); 

При создании новых элементов (или выбора существующих), JQuery возвращает элементы в коллекции. Многие разработчики, новые для jQuery, предполагают, что эта коллекция является массивом. В конце концов, он имеет нуль-индексированную последовательность элементов DOM, некоторые знакомые функции массива и свойство .length. На самом деле объект jQuery более сложный.

Источник: The jQuery Object

Answer 2

Если вы хотите использовать Multiupload файл как раз это не

$ _FILES [ 'файл'] [ 'имя']

It м. быть

$ _FILES [ 'файлы'] [ 'имя']

пример для доступа многофайловым загружены на сервер

$fileSelected = count($_FILES['files']['name']); 
$_temp = 0; 
foreach ($_FILES['files']['tmp_name'] as $key => $value) { 
    $file_tmp = $_FILES['files']['tmp_name'][$key]; 
    if(move_uploaded_file($file_tmp, $folder)){ 
      //Upload successful 
    }else{ 
      //Fail 
    } 
} 

Я надеюсь, что эта помощь