在Ajax聯繫表單上的文件上傳

我想通過文件上傳的形式來擴展這個腳本：Ajax Contact Form on GitHub PHPMailer的成功實現之後，我認爲添加一個新的文件上傳會很有趣形成。但是我不會讓它運行。在Ajax聯繫表單上的文件上傳

我添加了一個新的表單域的index.html的：

<div class="form-group" id="file1-field"> 
 
    <label for="form-file1" class="col-lg-2 control-label">Dateianhang</label> 
 
    <div class="col-lg-10"> 
 
     <input type="file" class="form-control" id="form-file1" name="form-file1"> 
 
    </div> 
 
</div>

後來我加入的contentType和過程數據線到* .js文件。

$.ajax({ 
 
    type : 'POST', 
 
    url : 'php/process.php', 
 
    data : formData, 
 
    dataType : 'json', 
 
    contentType : false, 
 
    processData : false, 
 
    encode : true 
 
})

在最後一步我已經添加了這些行到PHP腳本：

if(is_array($_FILES)) { 
    $mail->AddAttachment($_FILES['form-file1']['tmp_name'],$_FILES['form-file1']['name']); 
}

我身邊有一派，tryied一切，但我不能讓任何數據超出了它。整個表單腳本中斷。

我希望你能幫助我。提前致謝。

來源

2016-02-01 Aiko

在你的輸入文件中加入'enctype ='multipart/form-data'' – Mihai

謝謝你的幫助。但是很抱歉，錯誤仍然存在：http://imgur.com/4Id2pNn它只是在我刪除contentType和processData行時按預期工作。 – Aiko

有了這兩行，整個表單字段將標記爲紅色，但所有內容都填充正確（電子郵件除外）。 – Aiko

我找到了一個解決方案：

獲取表單數據與此過程解決了我的問題：

// get the form data 
 
var fData = new FormData(); 
 
fData.append('name', $('input[name=form-name]').val()); 
 
fData.append('email', $('input[name=form-email]').val()); 
 
fData.append('subject', $('input[name=form-subject]').val()); 
 
fData.append('message', $('textarea[name=form-message]').val()); 
 
fData.append('file1', $('input[name=form-file1]')[0].files[0]); 
 

 
// process the form 
 
$.ajax({ 
 
    type: 'POST', 
 
    url: 'php/process.php', 
 
    data: fData, 
 
    dataType: 'json', 
 
    contentType: false, 
 
    processData: false, 
 
    encode: true 
 
})

相反的：

  // get the form data 
 
     var formData = { 
 
      'name': $('input[name="form-name"]').val(), 
 
      'email': $('input[name="form-email"]').val(), 
 
      'subject': $('input[name="form-subject"]').val(), 
 
      'message': $('textarea[name="form-message"]').val() 
 
     }; 
 

 
     // process the form 
 
     $.ajax({ 
 
      type: 'POST', 
 
      url: 'php/process.php', 
 
      data: formData, 
 
      dataType: 'json', 
 
      //contentType : false, 
 
      //processData : false, 
 
      encode: true 
 
     })

感謝您的幫助！

來源

2016-02-02 10:40:08 Aiko

在Ajax聯繫表單上的文件上傳

回答

相關問題