在现有的Ajax代码中添加图片上传功能 [英] Add image uploading function inside this existing ajax code

问题描述

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

My code here works fine except image uploading. It inserts all data in database .

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

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

But after adding file type input in php it is showing

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

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

如何在现有代码中添加图像上传功能.

How can I add image uploading function in my existing code.

<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>

submit.php

submit.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);

	?>
    

推荐答案

您可以使用FormData，而且我建议您可以更改表单的元素ID，现在它们都具有('lname')了. :

You can use FormData, also I suggest you can change the elements id of the form, now all of them have ('lname') Try this with your current:

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

In yout HTML, put an ID to your file input

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

并更改其他输入的ID.

And change the id of the other input.

在您的JavaScript中:

In your 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访问输入

In your PHP code you can access the image with $_FILE and the input with $_POST

这篇关于在现有的Ajax代码中添加图片上传功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！