javascript - 在现有的ajax代码中添加图像上传功能

Question

除了图像上传之外，我的代码工作正常。它将所有数据插入数据库中。

<input type="file" name="image2" class="file" id="imgInp"/>

但是在 php 中添加文件类型输入后，它显示

Notice: Undefined index: image2 in C:\xampp\htdocs\upload\submit.php on line 18

如何在现有代码中添加图片上传功能。

<div id="form-content">
			
<form method="post" id="reg-form" enctype="multipart/form-data" autocomplete="off">
				
<div class="form-group">
<input type="text" class="form-control" name="txt_fname" id="lname" placeholder="First Name" required /></div>
				
<div class="form-group">
  <input type="text" class="form-control" name="txt_lname" id="lname" placeholder="Last Name" required /></div>
				
<div class="form-group">
<input type="text" class="form-control" name="txt_email" id="lname" placeholder="Your Mail" required />
</div>
				
<div class="form-group">
<input type="text" class="form-control" name="txt_contact" id="lname" placeholder="Contact No" required />
</div>
				
                // here is the problem 
 
 <input type="file" name="image2" class="file" id="imgInp"/>
				
                 //here is the problem

  <hr />
				
				
<div class="form-group">
<button class="btn btn-primary">Submit</button>
</div>
				
</form>
</div>

<script type="text/javascript">
$(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 ...');		});
	});
  
  </script>

提交.php

<?php

$con = mysqli_connect("localhost","root","","table"  ) or die

( "unable to connect to internet");

include ("connect.php");
include ("functions.php");

if( $_POST ){
	

	$fname = $_POST['txt_fname'];
	$lname = $_POST['txt_lname'];
	$email = $_POST['txt_email'];
	$phno = $_POST['txt_contact'];
	


$post_image2 = $_FILES['image2']['name'];  // this line shows error
$image_tmp2 = $_FILES['image2']['tmp_name'];




move_uploaded_file($image_tmp2,"images/$post_image2");
	

$insert =" insert into comments 

(firstname,lastname,email,number,post_image) values('$fname','$lname','$email','$phno','$post_image2' ) ";

$run = mysqli_query($con,$insert);

	?>
    

Answer 1

您可以使用FormData，我也建议您更改表单的元素id，现在所有元素都有('lname')尝试使用您当前的:

在 HTML 中，将 ID 添加到文件输入

<input type="file" name="image2" id="name="image2"" class="file" id="imgInp"/>

并更改另一个输入的 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 访问输入