在现有的ajax代码中添加图像上传function

我的代码在这里工作正常，除了图片上传 它将所有数据插入数据库中。

但是在php中添加文件类型输入之后就会显示出来

注意：未定义的索引：第18行的C：\ xampp \ htdocs \ upload \ submit.php中的image2

如何在现有代码中添加图像上传function。

 
 
 
 
 
 
 
  
 
  
 // here is the problem  //here is the problem 
 
 Submit 
 
 
  $(document).ready(function() { // submit form using $.ajax() method $('#reg-form').submit(function(e){ e.preventDefault(); // Prevent Default Submission $.ajax({ url: 'submit.php', type: 'POST', data: $(this).serialize() // it will serialize the form data }) .done(function(data){ $('#form-content').fadeOut('slow', function(){ $('#form-content').fadeIn('slow').html(data); }); }) .fail(function(){ alert('Ajax Submit Failed ...'); }); });  

submit.php

Answer 1

您可以使用FormData，我建议您可以更改表单的元素ID，现在所有这些都有（’lname’）尝试使用当前的：

在你的HTML中，为你的文件输入添加一个ID

并更改其他输入的id。

在您的JavaScript中：

 var frmData = new FormData(); //for the input frmData.append('image2', $('#image2')[0].files[0]); //for all other input $('#reg-form :input').each(function(){ if($(this).attr('id')!='image2' ){ frmData.append($(this).attr('name'), $(this).val() ); } }); $.ajax( { url: 'URLTOPOST', type: 'POST', data: frmData, processData: false, contentType: false }).done(function( result ) { //When done, maybe show success dialog from JSON }).fail(function( result ) { //When fail, maybe show an error dialog }).always(function( result ) { //always execute, for example hide loading screen }); 

在PHP代码中，您可以使用$ _FILE访问图像，使用$ _POST访问输入

Answer 2

FormData（）适用于现代浏览器 。如果您想要较旧的浏览器支持，请使用malsup / form插件

你的表格

Javscript

在php extract($_POST)中获取所有输入数据和$_FILE文件