Question

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

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

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

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

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

＆＃13;

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

＆＃13;

submit.php

＆＃13;

<?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);

	?>

＆＃13;

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

访问输入

Answer 2

FormData（）适用于modern browsers。如果您想使用较早的浏览器支持，请使用malsup/form插件

您的表格

<form method="post" action="action.php" id="reg-form" enctype="multipart/form-data" autocomplete="off">

Javscript

<script type="text/javascript">
var frm = $('#reg-form');
frm.submit(function (ev) {
var ajaxData = new FormData(frm);
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: ajaxData,
        contentType: false,             
        cache: false,           
        processData:false, 
        success: function (data) {
            alert('ok');
        }
    });

    ev.preventDefault();
});

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

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

2 个答案: