2014-04-28 198 views
0

我正在使用jQuery ajax上傳文件。當我點擊上傳按鈕時,它失敗並且ajax的錯誤部分顯示爲Uncaught TypeError: Cannot read property 'length' of undefined。我檢查了代碼,發現alerting the jqXHR shows success in the first ajax call,but the ajax call in submitForm() is not working。控制器在之前停止,並在控制檯中顯示上述錯誤。請幫助我。ajax jquery文件上傳不起作用

我的代碼如下:

$(document).ready(function() 
{ 
    //for checking whether the file queue contain files or not 
    var files; 
    // Add events 
    $('input[type=file]').on('change', prepareUpload); 

    // Grab the files 
    function prepareUpload(event) 
    { 
     files = event.target.files; 
     alert(files); 
    } 
    $("#file-form").on('submit',uploadFiles); 
    function uploadFiles(event) 
    { 
     event.stopPropagation(); 
     event.preventDefault(); 

     // Create a formdata object and add the files 
     var data = new FormData(); 
     $.each(files, function(key, value) 
     { 
      data.append(key, value); 
      //alert(key+' '+ value); 
     }); 
     $.ajax({ 
      url: 'module/portal/filesharing/upload.php?files', 
      type: 'POST', 
      data: data, 
      cache: false, 
      dataType: 'json', 
      processData: false, 
      contentType: false, 
      success: function(data, textStatus, jqXHR) 
      { 
       if(typeof data.error === 'undefined') 
       { 
        // Success so call function to process the form 
        submitForm(event, data); 
       } 
       else 
       { 
        console.log('ERRORS: ' + data.error); 
       } 
      } 
     }); 
     function submitForm(event, data) 
     { 
      // Create a jQuery object 
      $form = $(event.target); 

      // Serialize the form data 
      var formData = $form.serialize();//controller stops here 

      // sterilise the file names 
      $.each(data.files, function(key, value) 
      { 
       formData = formData + '&filenames[]=' + value; 
      }); 

      $.ajax({ 
       url: 'update.php', 
       type: 'POST', 
       data: formData, 
       cache: false, 
       dataType: 'json', 
       success: function(data, textStatus, jqXHR) 
       { 
        if(typeof data.error === 'undefined') 
        { 
         // Success so call function to process the form 
         console.log('SUCCESS: ' + data.success); 
        } 
        else 
        { 
         // Handle errors here 
         console.log('ERRORS: ' + data.error); 
        } 
       }, 
       error: function(jqXHR, textStatus, errorThrown) 
       { 
        // Handle errors here 
        console.log('ERRORS: ' + textStatus); 
       }, 
       complete: function() 
       { 
        // STOP LOADING SPINNER 
       } 
      }); 
     } 
    } 
});  
</script> 

HTML:

<form id='file-form' action="" method="post" enctype="multipart/form-data"> 
    <input type="file" name="file" id="filename" ><br> 
    <input type="submit" id='upload' value="Upload file"> 
</form> 

我update.php:

$data = array(); 
if(isset($_GET['files'])) 
{  
    $error = false; 
    $files = array(); 
    $uploaddir = 'module/portal/filesharing/upload/'; 
    foreach($_FILES as $file) 
    { 
     if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name']))) 
     { 
      $files[] = $uploaddir .$file['name']; 
     } 
     else 
     { 
      $error = true; 
     } 
    } 
    $data = ($error) ? array('error' => 'There was an error uploading your files') :  array('files' => $files); 
} 
else 
{ 
    $data = array('success' => 'Form was submitted', 'formData' => $_POST); 
} 

echo json_encode($data); 

回答